@import url('https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@300;400;700&display=swap');

/**
 * AluRail TGV Glassmorphism UI CSS
 * Directly from final mockup.html
 */

html {
    margin-top: 0 !important;
}

/* Override WP Admin Bar padding */

:root {
    --blue: #0778AA;
    --purple: #8E74B2;
    --pink: #EE417D;
    --orange: #FBBA5B;
    --green: #10b981;
    --android-green: #3DDC84;
    --dark: #35353C;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --card-bg: rgba(0, 0, 0, 0.05);
    --bg-solid: #ffffff;
    --bg-card: #ffffff;
    --text-main: #35353C;
    --text-sub: #777;
    --panel-width: 380px;
}

body.dark-mode {
    --glass-bg: rgba(30, 30, 36, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(255, 255, 255, 0.05);
    --bg-solid: #1e1e24;
    --bg-card: #1e1e24;
    --text-main: #F0F0F0;
    --text-sub: #aaa;
}

body.aluline-public-body,
html.aluline-public-html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    position: fixed;
    background-color: #1a1a1a;
}

.map-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1 !important;
    isolation: isolate !important;
}

#aluline-map {
    width: 100%;
    height: 100%;
    isolation: isolate;
}

/* Isolate Leaflet's tile & marker panes into GPU-composited sublayers */
#aluline-map .leaflet-tile-pane {
    will-change: transform;
}

#aluline-map .leaflet-marker-pane,
#aluline-map .leaflet-overlay-pane {
    will-change: transform;
}

/* Promote each tile to its own compositing layer during pan/zoom */
#aluline-map .leaflet-tile {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

/* Top Bar Container */
.top-container {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 1010;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.branding-panel {
    padding: 12px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
    width: var(--panel-width);
    flex: 0 0 var(--panel-width);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.branding-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-hamburger {
    display: none;
    font-size: 20px;
    color: var(--text-main);
    cursor: pointer;
}

.branding-icon {
    width: 40px;
    height: 40px;
    /*    background: linear-gradient(135deg, var(--blue), var(--purple));*/
    border-radius: 12px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.branding-title,
.alu-brand-title,
.brand-title {
    font-family: 'Sulphur Point', 'Outfit', sans-serif !important;
    font-weight: 800;
    font-size: 28px !important;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: lowercase !important;
}

.branding-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switcher-pill {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 3px;
}

body.dark-mode .switcher-pill {
    background: rgba(255, 255, 255, 0.05);
}

.switcher-btn {
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 18px;
    cursor: pointer;
    color: var(--text-sub);
    transition: all 0.2s;
    background: transparent;
}

.switcher-btn.active {
    background: white;
    color: var(--blue);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body.dark-mode .switcher-btn.active {
    background: var(--dark);
    color: #00e5ff;
}

.dropdown-wrapper {
    position: relative;
}

.dropdown-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.user-avatar-img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tgv-expand {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.2s;
}

body.dark-mode .tgv-expand {
    background: rgba(255, 255, 255, 0.05);
}

.tgv-expand:hover {
    background: rgba(7, 120, 170, 0.2);
    color: var(--blue);
}

.dropdown-menu {
    position: absolute;
    top: -10px;
    left: calc(100% + 15px);
    right: auto;
    background: var(--bg-solid) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    transform: translateX(-10px);
    z-index: 1001;
}

.dropdown-menu ul,
.dropdown-menu li {
    background: transparent !important;
}

.dropdown-wrapper:hover .dropdown-menu,
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-main);
    display: block;
    text-decoration: none;
}

.dropdown-item:hover {
    background: rgba(7, 120, 170, 0.1);
    color: var(--blue);
}

.mobile-nav-dropdown {
    display: none !important;
}

.mobile-nav-dropdown.show {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    padding-top: 60px !important;
    flex-direction: column !important;
    background: var(--bg-solid) !important;
    border: none !important;
}

/* WP Menu Lists compatibility */
.clean-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-dropdown .dropdown-item {
    padding: 18px 25px !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.clean-menu li a {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-main);
    display: block;
    text-decoration: none;
}

.clean-menu li a:hover {
    background: rgba(7, 120, 170, 0.1);
    color: var(--blue);
}

.clean-menu li {
    margin: 0;
    padding: 0;
}

.clean-menu li a {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-main);
    display: block;
    text-decoration: none;
}

.clean-menu li a:hover {
    background: rgba(7, 120, 170, 0.1);
    color: var(--blue);
}

/* Top HUD */
.top-hud {
    padding: 12px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    pointer-events: auto;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.top-hud.hud-shifted-left {
    transform: translateX(-64px);
}

.hud-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

.hud-stat span {
    color: var(--blue);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--pink);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(238, 65, 125, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(238, 65, 125, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(238, 65, 125, 0);
    }
}

/* Floating Backend Message */
.floating-toast {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(251, 186, 91, 0.95);
    color: #fff;
    padding: 12px 20px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(251, 186, 91, 0.4);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

/* When spottingHud is visible, push systemToast below it */
#spottingHud[style*="flex"]~#systemToast,
body.spotting-active #systemToast {
    top: 150px;
}

.toast-close {
    cursor: pointer;
    opacity: 0.8;
}

.toast-close:hover {
    opacity: 1;
}

/* Left Details Panel */
.details-wrapper {
    position: absolute;
    top: 100px;
    left: 20px;
    bottom: 30px;
    width: var(--panel-width);
    z-index: 2000 !important;
    pointer-events: auto;
    display: flex;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.details-wrapper.collapsed {
    transform: translateX(calc(-100% - 20px));
}

.details-panel {
    width: var(--panel-width);
    height: 100%;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.details-panel.glass {
    background: rgba(255, 255, 255, 0.96);
}

body.dark-mode .details-panel.glass {
    background: rgba(30, 30, 36, 0.96);
}

.details-panel.train-detail-mode {
    overflow-y: hidden !important;
}

/* Expanded Pane Bento Styles */
.details-wrapper.pane-expanded {
    width: calc(var(--panel-width) * 3);
    max-width: calc(100vw - 60px);
    overflow: visible;
}

/* Expanded pane: col1 = header+tabs+info/jadwal fixed width, col23 = grafik fills rest */
.details-wrapper.pane-expanded .details-panel {
    width: 100%;
    overflow-x: hidden;
}

.details-wrapper.pane-expanded #train-detail-header-wrapper {
    /* header stays full panel width at the top */
    flex-shrink: 0;
}

.details-wrapper.pane-expanded .details-panel.glass {
    background: rgba(255, 255, 255, 0.96);
}

body.dark-mode .details-wrapper.pane-expanded .details-panel.glass {
    background: rgba(30, 30, 36, 0.96);
}

.details-wrapper.pane-expanded #pane-cols-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.details-wrapper.pane-expanded #pane-col1 {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 var(--panel-width);
    width: var(--panel-width);
    min-height: 0;
    overflow: hidden;
}

/* Base graphic container (Normal mode) */
.graphic-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    min-width: 0;
}

.details-wrapper.pane-expanded #pane-col23 {
    display: flex !important;
    flex: 1;
    overflow: hidden;
    border-left: 1px solid var(--glass-border);
}

.details-wrapper.pane-expanded #tab-content-graphic {
    flex: 1;
    display: block !important;
    overflow-y: auto;
    padding: 15px;
    height: 100%;
}

/* In expanded mode, graphic content uses flex for stacking */
.details-wrapper.pane-expanded .graphic-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.bento-item {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 10px;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Row items just stack naturally now */
.bento-curve,
.bento-speed,
.bento-metro,
.bento-elevation,
.bento-info {
    width: 100%;
}

/* Metro 2D map container (expanded mode) */
.metro-map-2d {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.metro-map-2d svg {
    width: 100%;
    height: 100%;
}

/* ── Global animation keyframes for graphic tab ── */
@keyframes enrouteDot {

    0%,
    70%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    30% {
        opacity: 1;
        transform: scale(1.4);
    }
}

@keyframes moveDotsRight {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 15px 0;
    }
}

@keyframes moveDotsLeft {
    from {
        background-position: 15px 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    70% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Node currently at train position — pulsing glow ring */
.pulsing-node {
    animation: pulseRing 1.8s ease-out infinite !important;
    transform-box: fill-box;
    transform-origin: center;
}

/* En-route dot (animated moving train dot between stops) */
.enroute-dot {
    animation: enrouteDot 3s infinite;
    animation-play-state: running;
}

/* Metro edge line (horizontal bar in single-pane metro) */
.metro-edge {
    transition: background 0.4s ease;
}

/* Make expand tab disappear on mobile */
@media screen and (max-width: 768px) {
    .expand-tab {
        display: none !important;
    }
}

/* =========================================================================
   UNIVERSAL DETAIL PANE & SCROLL-UP RECOVERY (DESKTOP & MOBILE)
   ========================================================================= */
.details-panel.train-detail-mode,
#detailsWrapper.train-detail-mode {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.details-panel.train-detail-mode .branding-footer,
#detailsWrapper.train-detail-mode .branding-footer {
    display: none !important;
}
.details-panel.train-detail-mode #panelContent,
#detailsWrapper.train-detail-mode #panelContent,
#panelContent:has(#pane-cols-wrapper) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Scroll containers inside detail panel (Tab Info, Schedule, Graphic) */
#tab-content-info,
#tab-content-schedule,
#tab-content-graphic,
.details-wrapper #tab-content-info,
.details-wrapper #tab-content-schedule,
.details-wrapper #tab-content-graphic,
#detailsWrapper #tab-content-info,
#detailsWrapper #tab-content-schedule,
#detailsWrapper #tab-content-graphic {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    box-sizing: border-box !important;
}

/* DESKTOP (min-width: 769px): Row layout for side-by-side Col1 and Col23 */
@media (min-width: 769px) {
    /* 1. Default (Single Column / Not Expanded) */
    #detailsWrapper:not(.pane-expanded) #pane-cols-wrapper,
    .details-wrapper:not(.pane-expanded) #pane-cols-wrapper {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper:not(.pane-expanded) #pane-col1,
    .details-wrapper:not(.pane-expanded) #pane-col1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper:not(.pane-expanded) #pane-col23,
    .details-wrapper:not(.pane-expanded) #pane-col23 {
        display: none !important;
    }

    /* 2. Expanded (Bento Multi-Column with Graphic in Col 2-3 on Right) */
    #detailsWrapper.pane-expanded #pane-cols-wrapper,
    .details-wrapper.pane-expanded #pane-cols-wrapper {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper.pane-expanded #pane-col1,
    .details-wrapper.pane-expanded #pane-col1 {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 var(--panel-width) !important;
        width: var(--panel-width) !important;
        max-width: var(--panel-width) !important;
        min-width: var(--panel-width) !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper.pane-expanded #pane-col23,
    .details-wrapper.pane-expanded #pane-col23 {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-left: 1px solid var(--glass-border) !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper.pane-expanded #pane-col23 #tab-content-graphic,
    .details-wrapper.pane-expanded #pane-col23 #tab-content-graphic {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper.pane-expanded #pane-col23 .graphic-container,
    .details-wrapper.pane-expanded #pane-col23 .graphic-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* MOBILE (max-width: 768px): Bottom Sheet Column Layout */
@media (max-width: 768px) {
    #detailsWrapper #pane-cols-wrapper,
    .details-wrapper #pane-cols-wrapper,
    #pane-cols-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper #pane-col1,
    .details-wrapper #pane-col1,
    #pane-col1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #detailsWrapper #pane-col23,
    .details-wrapper #pane-col23,
    #pane-col23 {
        display: none !important;
    }
}

.toggle-tab {
    position: absolute !important;
    right: -40px;
    top: 50px;
    width: 40px;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 0 16px 16px 0;
    border-left: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-main);
    font-size: 18px;
    box-shadow: 8px 0 16px rgba(0, 0, 0, 0.1);
}

.search-tab {
    position: absolute !important;
    right: -40px;
    top: 186px;
    width: 40px;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 0 16px 16px 0;
    border-left: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--blue);
    font-size: 16px;
    box-shadow: 8px 0 16px rgba(0, 0, 0, 0.1);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, color 0.2s;
}

/* When expand tab is hidden (no has-expand-tab), search moves up and share follows */
.details-wrapper:not(.has-expand-tab) .search-tab {
    top: 118px;
}

.details-wrapper:not(.has-expand-tab) .share-tab {
    top: 186px;
}

.expand-tab {
    position: absolute !important;
    right: -40px;
    top: 118px;
    width: 40px;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 0 16px 16px 0;
    border-left: none;
    display: flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-main);
    font-size: 18px;
    box-shadow: 8px 0 16px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-wrapper.has-expand-tab .expand-tab {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.expand-tab:hover,
.expand-tab.active {
    background: var(--blue);
    color: #fff;
}

.search-tab:hover,
.search-tab.active {
    background: var(--blue);
    color: #fff;
}

.share-tab {
    position: absolute !important;
    right: -40px;
    top: 254px;
    width: 40px;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 0 16px 16px 0;
    border-left: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--blue);
    font-size: 20px;
    box-shadow: 8px 0 16px rgba(0, 0, 0, 0.1);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, color 0.2s;
}

.share-tab:hover {
    background: var(--blue);
    color: #fff;
}

.share-svg-icon {
    display: block;
    fill: currentColor;
    width: 1.1em;
    height: 1.1em;
}

.share-svg-path {
    fill: currentColor;
}

.mobile-pane-controls {
    display: none;
}

.search-container {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: none;
    align-items: center;
    flex-wrap: nowrap;
}

.search-container[style*="display: block"] {
    display: flex !important;
}

.search-container i {
    color: var(--blue);
    font-size: 18px;
}

.search-container input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    margin: 0 15px;
    font-family: 'Outfit';
    font-size: 16px;
    color: var(--text-main);
    font-weight: 500;
}

.sheet-content {
    padding: 5px;
    overflow-y: auto;
    flex: 1;
}

.sheet-content::-webkit-scrollbar {
    display: none;
}

.sheet-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 15px;
}

.btn-full {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: rgba(7, 120, 170, 0.1);
    color: var(--blue);
    border: 1px solid rgba(7, 120, 170, 0.3);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 15px;
    font-family: 'Outfit';
    box-sizing: border-box;
}

.btn-full:hover {
    background: var(--blue);
    color: white;
}

.list-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

body.dark-mode .list-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.list-card:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
}

.t-icon {
    width: 44px;
    height: 44px;
    background: rgba(7, 120, 170, 0.15);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue);
    margin-right: 15px;
    font-size: 18px;
    flex-shrink: 0;
}

.t-info {
    flex: 1;
}

.t-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: 16px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.t-title>span:first-child {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-title .pill {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.t-title .status-green {
    background: rgba(56, 142, 60, 0.1);
    color: #388e3c;
}

.t-title .status-yellow {
    background: rgba(245, 124, 0, 0.1);
    color: #f57c00;
}

.t-title .status-gray {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.t-route {
    font-size: 12px;
    color: var(--text-sub);
}

.timeline {
    position: relative;
    margin: 20px 0 20px 15px;
    border-left: 2px dashed var(--glass-border);
    padding-left: 20px;
}

.tl-item {
    position: relative;
    margin-bottom: 20px;
}

.tl-station {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 2px 0;
    position: relative;
}

.tl-station::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--blue);
    border: 3px solid var(--glass-bg);
    border-radius: 50%;
    z-index: 2;
}

.tl-item.passed .tl-station::before {
    background: #888;
}

.tl-item.active .tl-station::before {
    background: var(--pink);
    box-shadow: 0 0 10px var(--pink);
}

.tl-item.active.stopped .tl-station::before {
    animation: pulse 2s infinite;
}

.tl-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
}

.enroute-dots {
    position: absolute;
    left: -21px;
    /* Centers the 4px dot over the dashed line */
    top: -45px;
    height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    z-index: 1;
}

.enroute-dot {
    width: 4px;
    height: 4px;
    background: var(--pink);
    border-radius: 50%;
    opacity: 0;
}

.enroute-dot.animating {
    animation: enroutePulse 2.5s infinite;
}

.enroute-dot:nth-child(1) {
    animation-delay: 0s;
}

.enroute-dot:nth-child(2) {
    animation-delay: 0.3s;
}

.enroute-dot:nth-child(3) {
    animation-delay: 0.6s;
}

.enroute-dot:nth-child(4) {
    animation-delay: 0.9s;
}

@keyframes enroutePulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    15% {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 5px var(--pink);
    }

    30% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.tl-status {
    font-size: 12px;
    color: var(--text-sub);
}

.status-box {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

body.dark-mode .status-box {
    background: rgba(255, 255, 255, 0.05);
}

.status-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--pink);
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.4;
}

/* Floating Right Controls */
.controls-container {
    position: absolute;
    right: 20px;
    bottom: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: auto;
    overflow: visible !important;
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.25s ease;
    transform-origin: bottom right;
}

.controls-group {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw + 2px, 8px);
    padding: clamp(6px, 1vw + 2px, 8px);
    border-radius: clamp(16px, 1vw + 12px, 20px);
    overflow: visible !important;
}

.glass-btn {
    width: clamp(36px, 2vw + 28px, 48px);
    height: clamp(36px, 2vw + 28px, 48px);
    border-radius: clamp(10px, 1vw + 6px, 14px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1vw + 10px, 18px);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-main);
    background: transparent;
    border: none;
    outline: none;
    position: relative;
}

.glass-btn:hover {
    background: rgba(128, 128, 128, 0.1);
}

.glass-btn:active {
    transform: scale(0.9);
}

.menu-expandable {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s;
}

.menu-expandable.open {
    max-height: 800px;
    opacity: 1;
    overflow: visible !important;
}

@media (max-height: 820px) {
    .controls-group {
        gap: 5px !important;
        padding: 5px !important;
    }
    .controls-group .glass-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 15px !important;
    }
    .menu-expandable {
        gap: 5px !important;
    }
}
@media (max-height: 680px) {
    .controls-group {
        gap: 4px !important;
        padding: 4px !important;
    }
    .controls-group .glass-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 13px !important;
    }
    .menu-expandable {
        gap: 4px !important;
    }
}

.fab-main {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: white;
    border-radius: 16px;
}

.fab-main:hover {
    background: linear-gradient(135deg, var(--blue), var(--purple));
    filter: brightness(1.15);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

#themeModal,
#filterModal,
#settingsModal {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    pointer-events: auto !important;
}

#themeModal .modal-content,
#filterModal .modal-content,
#settingsModal .modal-content {
    pointer-events: auto !important;
    margin: auto !important;
    top: auto !important;
    bottom: auto !important;
}

@media (max-width: 768px) {
    #themeModal .modal-content,
    #filterModal .modal-content,
    #settingsModal .modal-content {
        max-height: 92vh !important;
        height: 92vh !important;
        margin: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
}

.app-fullscreen-modal .modal-content {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    /* Tambahan padding di bawah agar elemen terakhir tidak terpotong */
    top: 0 !important;
    left: 0 !important;
    position: fixed !important;
    transform: none !important;
}

/* Hilangkan frame/nested scroll di modal versi app */
.app-fullscreen-modal .settings-3col {
    max-height: none !important;
    overflow-y: visible !important;
}

.app-fullscreen-modal #uiThemeContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.app-fullscreen-modal .theme-opt {
    margin-bottom: 0;
    text-align: center;
    padding: 10px 5px;
    font-size: 13px;
}

.modal-content {
    background: var(--glass-bg) !important;
    color: var(--text-main) !important;
    width: 95%;
    max-width: min(95vw, 680px);
    padding: clamp(16px, 2.5vw, 26px);
    border-radius: 20px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s;
    max-height: 95vh;
    max-height: 95dvh;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

.modal-content.modal-compact {
    max-width: min(95vw, 420px);
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 10px;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: var(--text-sub);
    font-size: 20px;
    z-index: 100;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}

/* Textarea for Cast */
.cast-textarea {
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px;
    font-family: 'Outfit';
    color: var(--text-main);
    resize: none;
    margin-bottom: 10px;
    box-sizing: border-box;
}

body.dark-mode .cast-textarea {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.tc-info {
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.4;
    margin-bottom: 15px;
}

.tc-info a {
    color: var(--blue);
    text-decoration: underline;
}

.theme-opt {
    padding: 15px;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    margin-bottom: 10px;
    cursor: pointer;
    background: var(--card-bg);
    color: var(--text-main);
    font-weight: 500;
    transition: all 0.2s;
}

body.dark-mode .theme-opt {
    background: var(--card-bg);
    color: var(--text-main);
}

.theme-opt.active,
.theme-opt:hover {
    border-color: var(--blue) !important;
    background: rgba(7, 120, 170, 0.15) !important;
}

/* Checkbox Switch for Share */
.switch-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 5px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--blue);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.share-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.share-icon-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
}

/* Custom Leaflet Marker Labels (Directional) */
.marker-label-container {
    position: relative;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-circle {
    background: var(--blue);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

.marker-text {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--dark);
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

body.dark-mode .marker-text {
    background: rgba(30, 30, 36, 0.9);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.marker-text.zoom-hide-label {
    display: none !important;
}
.train-marker:hover .marker-text.zoom-hide-label,
.train-marker.active-marker .marker-text.zoom-hide-label {
    display: block !important;
}
.train-marker:hover .marker-text.live-cast-text.zoom-hide-label,
.train-marker.active-marker .marker-text.live-cast-text.zoom-hide-label {
    display: flex !important;
}

.dir-n .marker-text,
.dir-s .marker-text {
    top: 50%;
    transform: translateY(-50%);
}

/* Bundle Train / Through Train & Leg Colors */
.train-marker.is-bundle-related .marker-text,
.train-marker.is-bundle-virtual .marker-text {
    background: #E2DFD2 !important;
    border-color: #dcd8cd !important;
    color: var(--dark) !important;
}

.train-marker.is-bundle-related.dir-n .marker-text::after,
.train-marker.is-bundle-virtual.dir-n .marker-text::after {
    border-color: transparent transparent transparent #E2DFD2 !important;
}

.train-marker.is-bundle-related.dir-s .marker-text::after,
.train-marker.is-bundle-virtual.dir-s .marker-text::after {
    border-color: transparent #E2DFD2 transparent transparent !important;
}

.train-marker.is-bundle-related.dir-w .marker-text::after,
.train-marker.is-bundle-virtual.dir-w .marker-text::after {
    border-color: transparent transparent #E2DFD2 transparent !important;
}

.train-marker.is-bundle-related.dir-e .marker-text::after,
.train-marker.is-bundle-virtual.dir-e .marker-text::after {
    border-color: #E2DFD2 transparent transparent transparent !important;
}

body.dark-mode .train-marker.is-bundle-related .marker-text,
body.dark-mode .train-marker.is-bundle-virtual .marker-text {
    background: #36454F !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

body.dark-mode .train-marker.is-bundle-related.dir-n .marker-text::after,
body.dark-mode .train-marker.is-bundle-virtual.dir-n .marker-text::after {
    border-color: transparent transparent transparent #36454F !important;
}

body.dark-mode .train-marker.is-bundle-related.dir-s .marker-text::after,
body.dark-mode .train-marker.is-bundle-virtual.dir-s .marker-text::after {
    border-color: transparent #36454F transparent transparent !important;
}

body.dark-mode .train-marker.is-bundle-related.dir-w .marker-text::after,
body.dark-mode .train-marker.is-bundle-virtual.dir-w .marker-text::after {
    border-color: transparent transparent #36454F transparent !important;
}

body.dark-mode .train-marker.is-bundle-related.dir-e .marker-text::after,
body.dark-mode .train-marker.is-bundle-virtual.dir-e .marker-text::after {
    border-color: #36454F transparent transparent transparent !important;
}

.dir-n .marker-text {
    right: 14px;
}

.dir-n .live-cast-text {
    right: 22px;
}

.dir-s .marker-text {
    left: 14px;
}

.dir-s .live-cast-text {
    left: 22px;
}

.dir-e .marker-text,
.dir-w .marker-text {
    left: 50%;
    transform: translateX(-50%);
}

.dir-w .marker-text {
    top: 14px;
}

.dir-w .live-cast-text {
    top: 22px;
}

.dir-e .marker-text {
    bottom: 14px;
}

.dir-e .live-cast-text {
    bottom: 22px;
}

/* Marker Label Triangles */
.custom-marker .marker-text::after {
    display: none !important;
}

.train-marker .marker-text::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

.train-marker.dir-n .marker-text::after {
    top: 50%;
    right: -5px;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
}

body.dark-mode .train-marker.dir-n .marker-text::after {
    border-color: transparent transparent transparent rgba(30, 30, 36, 0.9);
}

.train-marker.dir-s .marker-text::after {
    top: 50%;
    left: -5px;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-color: transparent rgba(255, 255, 255, 0.9) transparent transparent;
}

body.dark-mode .train-marker.dir-s .marker-text::after {
    border-color: transparent rgba(30, 30, 36, 0.9) transparent transparent;
}

.train-marker.dir-w .marker-text::after {
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
}

body.dark-mode .train-marker.dir-w .marker-text::after {
    border-color: transparent transparent rgba(30, 30, 36, 0.9) transparent;
}

.train-marker.dir-e .marker-text::after {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0 5px;
    border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent;
}

body.dark-mode .train-marker.dir-e .marker-text::after {
    border-color: rgba(30, 30, 36, 0.9) transparent transparent transparent;
}

/* User Cast Marker (Special Train) */
.user-cast-label {
    position: absolute;
    right: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--pink);
    border-radius: 20px 8px 8px 20px;
    padding: 4px 10px 4px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(238, 65, 125, 0.3);
    z-index: 1;
    white-space: nowrap;
    backdrop-filter: blur(5px);
}

body.dark-mode .user-cast-label {
    background: rgba(30, 30, 36, 0.95);
    border-color: var(--pink);
}

.uc-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pink);
}

.uc-text {
    display: flex;
    flex-direction: column;
}

.uc-status {
    font-size: 11px;
    font-weight: 700;
    color: var(--pink);
    font-style: italic;
}

.uc-train {
    font-size: 9px;
    color: var(--text-sub);
    font-weight: 600;
}

/* Diagnostic Box */
.diag-box {
    font-family: monospace;
    background: #000;
    color: #0f0;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 13px;
    height: 160px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 8px;
}

/* Tooltips */
.custom-tooltip {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-main) !important;
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    max-width: 295px !important;
    min-width: 220px;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* Specialized Catchment Tooltip - Theme-adaptive & Anti-clipping */
.leaflet-tooltip.catchment-tooltip {
    background: var(--bg-solid, #ffffff) !important;
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.12)) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
    color: var(--text-main, #35353C) !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    width: 295px !important;
    min-width: 295px !important;
    max-width: 305px !important;
    overflow: visible !important;
    white-space: normal !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

.leaflet-tooltip.catchment-tooltip * {
    pointer-events: none !important;
}

body.dark-mode .leaflet-tooltip.catchment-tooltip {
    background: rgba(26, 26, 34, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65) !important;
    color: #f1f5f9 !important;
}

/* Pinned Catchment Popup (Click-to-inspect & scroll) */
.leaflet-popup.catchment-popup .leaflet-popup-content-wrapper {
    background: var(--bg-solid, #ffffff) !important;
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.12)) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important;
    color: var(--text-main, #35353C) !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    width: 310px !important;
    min-width: 295px !important;
    max-width: 320px !important;
    overflow: hidden !important;
}

body.dark-mode .leaflet-popup.catchment-popup .leaflet-popup-content-wrapper {
    background: rgba(26, 26, 34, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7) !important;
    color: #f1f5f9 !important;
}

.leaflet-popup.catchment-popup .leaflet-popup-content {
    margin: 0 !important;
    line-height: normal !important;
    pointer-events: auto !important;
}

.leaflet-popup.catchment-popup .leaflet-popup-content * {
    pointer-events: auto !important;
}

.leaflet-popup.catchment-popup .leaflet-popup-tip {
    background: var(--bg-solid, #ffffff) !important;
}

body.dark-mode .leaflet-popup.catchment-popup .leaflet-popup-tip {
    background: rgba(26, 26, 34, 0.98) !important;
}

.catchment-popup .stations-scroll-box::-webkit-scrollbar {
    width: 5px;
}
.catchment-popup .stations-scroll-box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}
body.dark-mode .catchment-popup .stations-scroll-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

.btn-close-catchment {
    transition: all 0.15s ease-in-out;
}
.btn-close-catchment:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    transform: scale(1.1);
}

/* Guarantee non-blocking hover: tracks and hazard canvases pass mouse events through */
.leaflet-aluTrack-pane,
.leaflet-aluTrack-pane canvas,
.leaflet-aluTrack-pane svg,
.leaflet-aluTrackPane-pane,
.leaflet-aluTrackPane-pane canvas,
.leaflet-aluTrackPane-pane svg,
.leaflet-pane.leaflet-aluTrack-pane,
.leaflet-pane.leaflet-aluTrack-pane canvas,
.leaflet-pane.leaflet-aluTrack-pane svg,
.leaflet-pane.leaflet-aluTrackPane-pane,
.leaflet-pane.leaflet-aluTrackPane-pane canvas,
.leaflet-pane.leaflet-aluTrackPane-pane svg,
.leaflet-hazardTracks-pane,
.leaflet-hazardTracks-pane canvas,
.leaflet-hazardTracks-pane svg,
.leaflet-hazardTracksPane-pane,
.leaflet-hazardTracksPane-pane canvas,
.leaflet-hazardTracksPane-pane svg,
.leaflet-pane.leaflet-hazardTracks-pane,
.leaflet-pane.leaflet-hazardTracks-pane svg,
.leaflet-pane.leaflet-hazardTracksPane-pane,
.leaflet-pane.leaflet-hazardTracksPane-pane svg {
    pointer-events: none !important;
}

/* Guarantee area catchment polygons always receive hover and click events */
.leaflet-aluArea-pane svg,
.leaflet-aluAreaPane-pane svg,
.leaflet-pane.leaflet-aluArea-pane svg,
.leaflet-pane.leaflet-aluAreaPane-pane svg {
    pointer-events: none !important;
}
.leaflet-aluArea-pane svg path,
.leaflet-aluAreaPane-pane svg path,
.leaflet-pane.leaflet-aluArea-pane svg path,
.leaflet-pane.leaflet-aluAreaPane-pane svg path {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.catchment-tooltip .tt-inner-body {
    padding: 12px 14px 14px 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.catchment-tooltip .tt-stats-box {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .catchment-tooltip .tt-stats-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.catchment-tooltip .tt-bar-track {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    margin-bottom: 5px;
}

body.dark-mode .catchment-tooltip .tt-bar-track {
    background: rgba(255, 255, 255, 0.15);
}

.custom-tooltip .tt-inner-body {
    padding: 12px 14px 11px 14px;
}

.tt-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--blue);
    margin-bottom: 2px;
}

.tt-subtitle {
    font-size: 11px;
    color: var(--text-sub);
}

/* --- Splash Screen --- */
#aluline-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--glass-bg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out;
    backdrop-filter: blur(10px);
}

.splash-logo-container {
    position: relative;
    width: 150px;
    height: 150px;
}

.splash-logo-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.splash-text-container {
    color: var(--text-sub);
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.splash-text-container p {
    margin: 0;
}

/* --- Leaflet Popup Overrides --- */
.leaflet-popup-content-wrapper {
    background: var(--glass-bg) !important;
    color: var(--text-main) !important;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.leaflet-popup-content {
    margin: 15px;
    min-width: 280px !important;
}

.leaflet-popup-tip-container {
    display: none;
}

.train-popup h3 {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--blue);
}

.train-popup p {
    margin: 4px 0;
    font-size: 13px;
}

.train-popup .popup-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.train-popup .popup-actions button {
    flex: 1;
    background: rgba(7, 120, 170, 0.1);
    color: var(--blue);
    border: 1px solid rgba(7, 120, 170, 0.2);
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.train-popup .popup-actions button:hover {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

/* --- Leaflet Control Overrides --- */
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-control-layers,
.leaflet-control-layers-expanded {
    background-color: var(--glass-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--glass-border) !important;
}

.leaflet-control-layers label {
    color: var(--text-main) !important;
}

.leaflet-control-layers-separator {
    border-top: 1px solid var(--glass-border) !important;
}

body.hide-track-outlines path.track-outline {
    display: none !important;
}

/* RESPONSIVE Adjustments */
@media (max-width: 768px) {
    .top-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        left: 10px;
        right: 10px;
        top: 10px;
        width: calc(100% - 20px);
        box-sizing: border-box;
    }

    .top-container:has(.top-hud.expanded) {
        justify-content: center !important;
    }

    .top-container:has(.top-hud.expanded) .branding-panel {
        display: none !important;
    }

    .branding-panel {
        width: auto;
        flex: 0 0 auto;
        border-radius: 12px;
        padding: 5px 8px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }

    .branding-panel .branding-title,
    .branding-panel .branding-right,
    .mobile-hamburger {
        display: none !important;
    }

    .branding-icon {
        margin-right: 0 !important;
    }

    /* Show hamburger on mobile left */
    .mobile-nav-dropdown {
        display: none !important;
    }



    /* Re-enable mobile menu on mobile view */
    .desktop-tgv-menu {
        display: none;
    }

    /* Hide expander on mobile right */
    .desktop-tgv-user {
        display: none;
    }

    /* Hide user avatar on mobile right */

    .floating-toast {
        top: 130px;
        width: calc(100% - 20px);
        box-sizing: border-box;
        font-size: 12px;
        z-index: 3000;
    }

    .top-hud {
        align-self: center;
        width: auto;
        max-width: 100%;
        border-radius: 16px;
        padding: 10px 15px;
        box-sizing: border-box;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 5px;
        transition: all 0.3s ease;
    }

    .hud-stat {
        font-size: 12px;
        white-space: nowrap;
    }

    .search-tab {
        display: none !important;
    }

    .share-tab {
        display: none !important;
    }

    .details-wrapper,
    #detailsWrapper,
    .details-wrapper.pane-expanded,
    #detailsWrapper.pane-expanded {
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        top: auto !important;
        height: 50vh;
        transform: translateY(0);
        transition: height 0.4s ease-in-out, transform 0.4s ease-in-out;
        z-index: 1200 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .details-wrapper.pane-mid,
    #detailsWrapper.pane-mid {
        height: 50vh !important;
        max-height: 50vh !important;
        transform: translateY(0) !important;
        z-index: 1200 !important;
    }

    .details-wrapper.pane-full,
    #detailsWrapper.pane-full {
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 2500 !important;
        transform: translateY(0) !important;
    }

    .details-panel,
    .details-wrapper .details-panel,
    #detailsWrapper .details-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px 24px 0 0 !important;
        box-sizing: border-box !important;
    }

    .details-wrapper.pane-full .details-panel,
    #detailsWrapper.pane-full .details-panel {
        border-radius: 0 !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .details-wrapper #panelContent,
    #detailsWrapper #panelContent {
        flex: 1 1 auto !important;
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Non-train views (station timetable, default train list, search results, transit results) */
    .details-panel:not(.train-detail-mode) #panelContent,
    #detailsWrapper:not(.train-detail-mode) #panelContent,
    #panelContent:not(:has(#pane-cols-wrapper)) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px calc(75px + env(safe-area-inset-bottom, 0px)) 14px !important;
    }

    /* Train detail view wraps #pane-cols-wrapper which manages internal scroll tabs */
    .details-panel.train-detail-mode #panelContent,
    #detailsWrapper.train-detail-mode #panelContent,
    #panelContent:has(#pane-cols-wrapper) {
        overflow: hidden !important;
        padding: 0 !important;
    }

    .details-wrapper #pane-cols-wrapper,
    #detailsWrapper #pane-cols-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }

    .details-wrapper #pane-col1,
    #detailsWrapper #pane-col1 {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .details-wrapper #pane-col23,
    #detailsWrapper #pane-col23 {
        display: none !important;
    }

    .details-wrapper #train-detail-header-wrapper,
    #detailsWrapper #train-detail-header-wrapper {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 12px 14px 0 14px !important;
    }

    .details-wrapper #train-detail-header-wrapper .section-title,
    #detailsWrapper #train-detail-header-wrapper .section-title {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .details-wrapper .dp-header-title-container,
    #detailsWrapper .dp-header-title-container {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .details-wrapper .dp-header-name,
    #detailsWrapper .dp-header-name {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .details-wrapper .dp-header-stats,
    #detailsWrapper .dp-header-stats {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .details-wrapper .dp-header-buttons,
    #detailsWrapper .dp-header-buttons {
        flex-shrink: 0 !important;
        gap: 4px !important;
    }

    .details-wrapper .train-tabs,
    #detailsWrapper .train-tabs,
    .details-wrapper .aluline-train-tabs,
    #detailsWrapper .aluline-train-tabs,
    .details-wrapper .station-tabs,
    #detailsWrapper .station-tabs {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .details-wrapper #tab-content-info,
    .details-wrapper #tab-content-schedule,
    .details-wrapper #tab-content-graphic,
    #detailsWrapper #tab-content-info,
    #detailsWrapper #tab-content-schedule,
    #detailsWrapper #tab-content-graphic,
    .details-wrapper #stationTimetableContainer,
    #detailsWrapper #stationTimetableContainer {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        min-width: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px calc(75px + env(safe-area-inset-bottom, 0px)) 14px !important;
        box-sizing: border-box !important;
    }

    .details-wrapper .special-pane-banner-wrapper,
    #detailsWrapper .special-pane-banner-wrapper,
    .details-wrapper .special-pane-banner,
    #detailsWrapper .special-pane-banner,
    .details-wrapper .detail-pane-rs-photo-wrapper,
    #detailsWrapper .detail-pane-rs-photo-wrapper,
    .details-wrapper .status-box,
    #detailsWrapper .status-box,
    .details-wrapper .timeline,
    #detailsWrapper .timeline,
    .details-wrapper table,
    #detailsWrapper table {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .details-wrapper img,
    #detailsWrapper img,
    .details-wrapper svg,
    #detailsWrapper svg {
        max-width: 100% !important;
        height: auto !important;
    }

    .details-wrapper .graphic-container,
    #detailsWrapper .graphic-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 25px !important;
    }

    .details-wrapper.pane-full .search-container,
    #detailsWrapper.pane-full .search-container {
        padding-right: 125px !important;
        white-space: nowrap;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Spotting Camera FAB for Mobile & Android */
    #aluline-camera-fab {
        position: fixed !important;
        bottom: calc(238px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 1000 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        color: var(--pink, #ee417d) !important;
        cursor: pointer !important;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    }
    #aluline-camera-fab iconify-icon {
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }
    body.dark-mode #aluline-camera-fab,
    body.dark-theme #aluline-camera-fab {
        background: rgba(24, 24, 27, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        color: var(--pink, #ee417d) !important;
    }
    body.details-pane-open #aluline-camera-fab,
    #detailsWrapper.pane-mid ~ #aluline-camera-fab,
    #detailsWrapper.pane-full ~ #aluline-camera-fab,
    body.modal-open #aluline-camera-fab,
    body.drawer-open #aluline-camera-fab {
        display: none !important;
    }

    .details-wrapper.collapsed {
        transform: translateY(105%) !important;
        height: 50vh;
    }

    .details-wrapper.collapsed .mobile-pane-controls {
        display: none !important;
    }

    .toggle-tab {
        display: none !important;
    }

    .mobile-pane-controls {
        display: flex !important;
        position: absolute;
        top: -34px;
        right: 20px;
        left: auto;
        width: auto;
        height: 34px;
        align-items: center;
        pointer-events: auto;
        z-index: 3000;
    }

    .mobile-pane-btns-tab {
        height: 34px;
        padding: 0 14px;
        background: var(--glass-bg);
        backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        border-bottom: none;
        border-radius: 14px 14px 0 0;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    }

    .mobile-pane-btn {
        width: 28px !important;
        height: 28px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-main);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        cursor: pointer;
        padding: 0 !important;
    }

    .mobile-back-btn {
        width: auto !important;
        padding: 0 6px !important;
        gap: 6px;
    }

    .mobile-back-btn .back-text {
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }

    .mobile-pane-divider {
        width: 1px;
        height: 16px;
        background: var(--glass-border);
    }

    .details-wrapper.pane-full .mobile-pane-controls {
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        z-index: 3500 !important;
    }

    .details-wrapper.pane-full .mobile-pane-btns-tab {
        padding: 0 8px !important;
        height: 40px !important;
        width: auto !important;
        border-radius: 20px !important;
        border: 1px solid var(--glass-border) !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .details-wrapper.pane-full .mobile-pane-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .details-wrapper.pane-full .mobile-back-btn .back-text {
        display: none !important;
    }

    .details-wrapper.pane-full #mobileMidBtn {
        display: flex !important;
    }

    .details-wrapper.pane-full #mobileExpandBtn,
    .details-wrapper.pane-full .mobile-pane-divider {
        display: none !important;
    }

    .desktop-back-btn {
        display: none !important;
    }

    .controls-container {
        top: auto !important;
        bottom: 25px !important;
        right: 12px;
        z-index: 1100;
        overflow: visible !important;
        transition: transform 0.25s ease;
        transform-origin: bottom right;
    }

    .details-wrapper.collapsed~.controls-container {
        top: auto !important;
        bottom: 25px !important;
    }

    .details-wrapper.pane-full~.controls-container {
        display: none !important;
    }

    .details-panel {
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .details-panel::-webkit-scrollbar {
        display: none;
    }

    .sheet-content {
        overflow-y: visible;
        flex: none;
        height: auto;
        overflow: hidden;
    }

    .mobile-floating-pane-container {
        position: fixed;
        left: 16px;
        bottom: 25px;
        z-index: 1050;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-float-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        background: var(--glass-bg) !important;
        backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-main);
        font-size: 18px;
        cursor: pointer;
    }

    @keyframes alulinePulseAttention {
        0% {
            transform: scale(1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 6px 22px rgba(255, 107, 0, 0.45);
            border-color: var(--orange);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }
    }

    .mobile-float-tooltip {
        padding: 10px 16px;
        border-radius: 20px;
        background: var(--glass-bg);
        backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-main);
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        white-space: nowrap;
        animation: alulinePulseAttention 1.2s infinite ease-in-out;
    }

    #mobileSearchBtn {
        position: fixed;
        left: 14px;
        bottom: 130px;
        z-index: 1050;
        transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    }

    .aluline-map-watermark {
        bottom: 38px !important;
        width: calc(100% - 80px);
        max-width: 550px;
        white-space: normal !important;
        line-height: 1.35;
        font-size: 9.5px;
    }
}

.leaflet-tooltip-top:before {
    border-top-color: var(--glass-bg) !important;
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: var(--glass-bg) !important;
}

.leaflet-tooltip-left:before {
    border-left-color: var(--glass-bg) !important;
}

.leaflet-tooltip-right:before {
    border-right-color: var(--glass-bg) !important;
}

.aluline-btn {
    padding: 8px 15px;
    border-radius: 8px;
    font-family: 'Outfit';
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--blue);
    color: white;
    transition: all 0.2s;
}

.aluline-btn:hover {
    background: #065b82;
}

.aluline-btn-outline {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
}

.aluline-btn-outline:hover {
    background: var(--blue);
    color: white;
}

/* Hide Leaflet tooltip triangle to match dark/light theme */
.custom-tooltip::before {
    display: none !important;
}

.train-marker:hover .marker-text,
.train-marker.active-marker .marker-text {
    opacity: 0 !important;
}

/* Watermark & Footer Styles */
.aluline-map-watermark {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 0.22;
    font-size: 11px;
    text-align: center;
    color: var(--text-main);
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

body.dark-mode .aluline-map-watermark {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.aluline-socials-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aluline-social-link {
    display: inline-block;
    transition: transform 0.2s;
}

.aluline-social-link:hover {
    transform: scale(1.1);
}

.aluline-social-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Dark Mode Leaflet Popups and Controls */
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
    background: #35353C;
    color: #f0f0f0;
}

body.dark-mode .train-popup h3 {
    color: #00e5ff;
}

body.dark-mode .leaflet-control-layers,
body.dark-mode .leaflet-control-layers-expanded,
body.dark-mode .leaflet-bar,
body.dark-mode .leaflet-bar a,
body.dark-mode .leaflet-control {
    background-color: #35353C;
    color: #f0f0f0;
    border-color: #555;
}

body.dark-mode .leaflet-bar a:hover {
    background-color: #444;
}

body.dark-mode .leaflet-control-layers-separator {
    border-top: 1px solid #555;
}

body.dark-mode .modal-content h1,
body.dark-mode .modal-content h2,
body.dark-mode .modal-content h3,
body.dark-mode .modal-content h4,
body.dark-mode .modal-content h5,
body.dark-mode .modal-content h6,
body.dark-mode .modal-title {
    color: white !important;
}


@keyframes moveArrowsRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

.t-title-scroll::-webkit-scrollbar {
    display: none;
}

.smooth-arrow-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 12px;
    position: relative;
    overflow: hidden;
}

.smooth-arrow {
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--text-sub);
    border-right: 1.5px solid var(--text-sub);
    transform: rotate(45deg) translate(-10px, 10px);
    animation: smoothArrowAnim 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.smooth-arrow:nth-child(2) {
    animation-delay: -1s;
}

@keyframes smoothArrowAnim {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, 10px);
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, -10px);
    }
}

/* ============================================================
   SPLASH SCREEN — 1:1 match with map_splash_mockup.html
   ============================================================ */

/* Splash-specific CSS variables (mirroring mockup's --accent-color, --text-primary, etc.) */
:root {
    --splash-accent: #1a73e8;
    --splash-text-primary: #1f1f1f;
    --splash-text-secondary: #5f6368;
    --splash-bg: #ffffff;
    --splash-line-color: 150, 150, 150;
}

/* Dark mode: stored preference via body class (set by initUiTheme before splash renders) */
body.dark-mode {
    --splash-accent: #8ab4f8;
    --splash-text-primary: #f1f3f4;
    --splash-text-secondary: #9aa0a6;
    --splash-bg: #0d0e12;
    --splash-line-color: 200, 200, 200;
}

#aluline-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--splash-bg);
    color: var(--splash-text-primary);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: opacity 1.2s ease, visibility 1.2s ease;
    overflow: hidden;
    box-sizing: border-box;
}

#aluline-splash-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
}

.splash-content-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 28px;
    box-sizing: border-box;
}

#aluline-splash-heading {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem 0;
    letter-spacing: -0.025em;
    color: var(--splash-text-primary);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#aluline-splash-subheading {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--splash-text-secondary);
    margin: 0 0 2.5rem 0;
    max-width: 680px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    transition: opacity 0.5s ease;
}

/* --- Dot-floating loader (1:1 from mockup) --- */
.splash-loader-container {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
    width: 120px;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.dot-floating {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--splash-accent);
    animation: aluline-dot-floating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}

.dot-floating::before,
.dot-floating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--splash-accent);
}

.dot-floating::before {
    animation: aluline-dot-floating-before 3s infinite ease-in-out;
}

.dot-floating::after {
    animation: aluline-dot-floating-after 3s infinite cubic-bezier(0.4, 0, 1, 1);
}

@keyframes aluline-dot-floating {
    0% {
        transform: translateX(-60px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    75% {
        transform: translateX(60px);
        opacity: 1;
    }

    85% {
        opacity: 0;
    }

    100% {
        transform: translateX(60px);
        opacity: 0;
    }
}

@keyframes aluline-dot-floating-before {
    0% {
        transform: translateX(-60px);
    }

    50% {
        transform: translateX(-14px);
    }

    75% {
        transform: translateX(-60px);
    }

    100% {
        transform: translateX(-60px);
    }
}

@keyframes aluline-dot-floating-after {
    0% {
        transform: translateX(-60px);
    }

    50% {
        transform: translateX(14px);
    }

    75% {
        transform: translateX(60px);
    }

    100% {
        transform: translateX(60px);
    }
}

/* --- Disclaimer small text --- */
.splash-disclaimer {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--splash-text-secondary);
    max-width: 520px;
    opacity: 0.75;
    transition: opacity 0.5s ease;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

/* Fade-out state applied by JS (matches mockup's opacity+visibility transition) */
#aluline-splash-screen.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    #aluline-splash-heading {
        font-size: 2.25rem;
        letter-spacing: -0.025em;
    }

    #aluline-splash-subheading {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .splash-content-wrapper {
        padding: 1.5rem;
    }
}



/* ============================================================
 * v0.6.0.5  Tab Resume Overlay (#aluline-resuming-overlay)
 * ============================================================ */

#aluline-resuming-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px) brightness(0.7);
    -webkit-backdrop-filter: blur(10px) brightness(0.7);
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#aluline-resuming-overlay.aro-show {
    opacity: 1;
    pointer-events: auto;
}

.aro-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 32px 48px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body:not(.dark-mode) .aro-inner {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
}

.aro-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #0778AA;
    border-radius: 50%;
    animation: aro-spin 0.9s linear infinite;
}

body:not(.dark-mode) .aro-spinner {
    border-color: rgba(7, 120, 170, 0.2);
    border-top-color: #0778AA;
}

@keyframes aro-spin {
    to {
        transform: rotate(360deg);
    }
}

.aro-text {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-align: center;
}

body:not(.dark-mode) .aro-text {
    color: var(--dark, #35353C);
}

/* v0.6.0.5  Search clear (X) button */
#search-clear-btn {
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}

#search-clear-btn:hover {
    opacity: 1;
    color: #e74c3c !important;
}

/* Hide scrollbars globally for detail panes */
#panelContent,
#tab-content-info,
#tab-content-schedule,
#stationTimetableContainer,
.details-panel,
.timeline {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#panelContent::-webkit-scrollbar,
#tab-content-info::-webkit-scrollbar,
#tab-content-schedule::-webkit-scrollbar,
#stationTimetableContainer::-webkit-scrollbar,
.details-panel::-webkit-scrollbar,
.timeline::-webkit-scrollbar {
    display: none;
}

.details-panel,
#panelContent,
#tab-content-graphic,
.metro-scroll-container,
.graphic-scroll-container,
.speed-scroll-container {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Constrain scroll containers to parent width — prevents bento items from
   expanding to the inner profile (e.g. 600px) width and overflowing the panel */
.metro-scroll-container,
.graphic-scroll-container,
.speed-scroll-container {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.details-panel::-webkit-scrollbar,
#panelContent::-webkit-scrollbar,
#tab-content-graphic::-webkit-scrollbar,
.metro-scroll-container::-webkit-scrollbar,
.graphic-scroll-container::-webkit-scrollbar,
.speed-scroll-container::-webkit-scrollbar {
    display: none !important;
}

.map-theme-bg {
    background-size: cover;
    background-position: center;
    color: white !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.8);
    height: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    box-shadow: inset 0 -25px 20px -10px rgba(0, 0, 0, 0.8);
    border: 2px solid transparent;
}

.map-theme-bg.active,
.map-theme-bg:hover {
    border-color: var(--blue) !important;
}

@media (min-width: 769px) {
    .aluline-mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .aluline-desktop-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #themeModalBody {
        overflow-y: auto !important;
    }

    #themeListContainer {
        max-height: none !important;
        overflow-y: visible !important;
    }

    #themePreviewContainer {
        margin-bottom: 20px;
    }
}

/* ============================================================
   ALU-TOOLTIP — Custom hover tooltip system (desktop only)
   v0.6.1.0 — overrides native browser title tooltips
   ============================================================ */
[data-alu-tip]:not(.toggle-tab):not(.expand-tab):not(.search-tab):not(.share-tab) {
    position: relative;
}

@media (min-width: 769px) {

    .glass-btn[data-alu-tip],
    .hud-stat[data-alu-tip],
    .top-hud[data-alu-tip],
    .circular-brand-btn[data-alu-tip],
    .user-menu[data-alu-tip] {
        position: relative;
    }

    .toggle-tab[data-alu-tip],
    .expand-tab[data-alu-tip],
    .search-tab[data-alu-tip],
    .share-tab[data-alu-tip] {
        position: absolute !important;
    }

    /* Tooltip bubble */
    [data-alu-tip]::after {
        content: attr(data-alu-tip);
        position: absolute;
        white-space: nowrap;
        width: max-content;
        pointer-events: none;
        z-index: 9999;
        font-family: 'Outfit', 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        padding: 5px 10px;
        border-radius: 8px;
        background: var(--glass-bg, rgba(20, 20, 30, 0.94));
        color: var(--text-main, #f0f0f0);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    /* Arrow base */
    [data-alu-tip]::before {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 10000;
        border: 5px solid transparent;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    [data-alu-tip]:hover::after,
    [data-alu-tip]:hover::before {
        opacity: 1;
    }

    /* ── LEFT placement (bubble appears LEFT of element, arrow → points right toward button) ── */
    /* Default for controls-group buttons on the right side of screen */
    [data-alu-tip]:not([data-alu-tip-pos])::after,
    [data-alu-tip][data-alu-tip-pos="left"]::after {
        right: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%) translateX(6px);
    }

    [data-alu-tip]:not([data-alu-tip-pos]):hover::after,
    [data-alu-tip]:hover[data-alu-tip-pos="left"]::after {
        transform: translateY(-50%) translateX(0);
    }

    [data-alu-tip]:not([data-alu-tip-pos])::before,
    [data-alu-tip][data-alu-tip-pos="left"]::before {
        right: calc(100% + 4px);
        top: 50%;
        transform: translateY(-50%);
        border-left-color: var(--glass-bg, rgba(20, 20, 30, 0.94));
        border-right-width: 0;
    }

    /* ── RIGHT placement (bubble appears RIGHT of element, arrow ← points left toward tab) ── */
    /* For toggle-tab / search-tab / share-tab on left side of screen */
    [data-alu-tip][data-alu-tip-pos="right"]::after {
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
    }

    [data-alu-tip]:hover[data-alu-tip-pos="right"]::after {
        transform: translateY(-50%) translateX(0);
    }

    [data-alu-tip][data-alu-tip-pos="right"]::before {
        left: calc(100% + 4px);
        top: 50%;
        transform: translateY(-50%);
        border-right-color: var(--glass-bg, rgba(20, 20, 30, 0.94));
        border-left-width: 0;
    }

    /* ── BOTTOM placement (bubble appears BELOW, arrow ↑ points up) ── */
    /* For HUD bar */
    [data-alu-tip][data-alu-tip-pos="bottom"]::after {
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
    }

    [data-alu-tip]:hover[data-alu-tip-pos="bottom"]::after {
        transform: translateX(-50%) translateY(0);
    }

    [data-alu-tip][data-alu-tip-pos="bottom"]::before {
        top: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%);
        border-bottom-color: var(--glass-bg, rgba(20, 20, 30, 0.94));
        border-top-width: 0;
    }

    /* Light mode — glassmorphism light override */
    body[data-ui-theme="light"] [data-alu-tip]::after,
    body.ui-light [data-alu-tip]::after {
        background: rgba(255, 255, 255, 0.97);
        color: #1a1a2e;
        border-color: rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    }

    body[data-ui-theme="light"] [data-alu-tip]::before,
    body.ui-light [data-alu-tip]::before {
        border-color: transparent;
    }

    body[data-ui-theme="light"] [data-alu-tip]::before,
    body.ui-light [data-alu-tip][data-alu-tip-pos="left"]::before,
    body.ui-light [data-alu-tip]:not([data-alu-tip-pos])::before {
        border-left-color: rgba(255, 255, 255, 0.97);
    }

    body[data-ui-theme="light"] [data-alu-tip][data-alu-tip-pos="right"]::before,
    body.ui-light [data-alu-tip][data-alu-tip-pos="right"]::before {
        border-right-color: rgba(255, 255, 255, 0.97);
    }

    body[data-ui-theme="light"] [data-alu-tip][data-alu-tip-pos="bottom"]::before,
    body.ui-light [data-alu-tip][data-alu-tip-pos="bottom"]::before {
        border-bottom-color: rgba(255, 255, 255, 0.97);
    }
}

/* ============================================================
   Circular Brand Action Buttons (Theme Toggle & Directory Menu)
   Inverted Button & Icon Contrast:
   - Dark Theme: Light handler background (#f8fafc), Dark icon (#0f172a)
   - Light Theme: Dark handler background (#0f172a), Light icon (#ffffff)
   ============================================================ */
.branding-right .circular-brand-btn:not(#btn-toggle-lang) {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Unified Subtle Glass Buttons in Dark & Light Modes */
body.dark-mode .branding-right .circular-brand-btn:not(#btn-toggle-lang),
body.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang),
html.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang),
[data-theme="dark"] .branding-right .circular-brand-btn:not(#btn-toggle-lang),
body:not(.ui-light):not([data-ui-theme="light"]) .branding-right .circular-brand-btn:not(#btn-toggle-lang) {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}
body.dark-mode .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover,
body.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover,
html.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover,
[data-theme="dark"] .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.05) !important;
}
body.dark-mode .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
body.dark-mode .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
body.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
body.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
html.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
html.dark-theme .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
[data-theme="dark"] .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
[data-theme="dark"] .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
body:not(.ui-light):not([data-ui-theme="light"]) .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
body:not(.ui-light):not([data-ui-theme="light"]) .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon {
    color: #f1f5f9 !important;
}

/* Light Theme: Subtle Translucent Glass Button */
body.ui-light .branding-right .circular-brand-btn:not(#btn-toggle-lang),
body[data-ui-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang),
html[data-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang),
body:not(.dark-mode):not(.dark-theme) .branding-right .circular-brand-btn:not(#btn-toggle-lang) {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #334155 !important;
}
body.ui-light .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover,
body[data-ui-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover,
html[data-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover,
body:not(.dark-mode):not(.dark-theme) .branding-right .circular-brand-btn:not(#btn-toggle-lang):hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
    transform: translateY(-1px) scale(1.05) !important;
}
body.ui-light .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
body.ui-light .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
body[data-ui-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
body[data-ui-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
html[data-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
html[data-theme="light"] .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon,
body:not(.dark-mode):not(.dark-theme) .branding-right .circular-brand-btn:not(#btn-toggle-lang) i,
body:not(.dark-mode):not(.dark-theme) .branding-right .circular-brand-btn:not(#btn-toggle-lang) iconify-icon {
    color: #334155 !important;
}

/* --- Track Layer System & Theme Modal Tabs --- */
.theme-tab-btn {
    outline: none;
    user-select: none;
}

.theme-tab-btn.active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 176, 255, 0.3);
}

.theme-tab-btn:hover:not(.active) {
    background: rgba(7, 120, 170, 0.1) !important;
    color: var(--text-main) !important;
}

.layer-toggle-box {
    transition: all 0.2s ease;
    cursor: pointer;
}

.layer-toggle-box:hover {
    border-color: var(--blue) !important;
    background: rgba(7, 120, 170, 0.1) !important;
}

.layer-toggle-box.active {
    border-color: var(--blue) !important;
    background: rgba(7, 120, 170, 0.18) !important;
    box-shadow: 0 0 12px rgba(0, 176, 255, 0.2);
}

/* Running LED Animation for Dynamic Route Trail */
.led-running-track,
path.led-running-track,
svg path.led-running-track {
    stroke-dasharray: 20, 300 !important;
    stroke-linecap: round !important;
    animation: alu-led-march 2.5s linear infinite !important;
    filter: drop-shadow(0 0 5px #6ee7b7);
}

@keyframes alu-led-march {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -320;
    }
}

@media (max-width: 768px) {
    #themeModalBody {
        overflow-y: auto !important;
        flex-direction: column !important;
    }

    #themeListContainer {
        max-height: none !important;
        overflow-y: visible !important;
    }

    #themePreviewContainer {
        display: none !important;
    }
}

.theme-tab-btn.active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 176, 255, 0.3);
}

@media (max-width: 1200px) {
    .details-wrapper.pane-expanded .graphic-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        overflow-y: auto !important;
    }

    .bento-curve,
    .bento-speed,
    .bento-metro,
    .bento-elevation,
    .bento-info {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* Train Loader */
.train-loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.train-loader {
    width: 50px;
    height: 50px;
    animation: rotate-loader 2s linear infinite;
}

.loader-track {
    stroke: currentColor;
    opacity: 0.1;
}

.loader-train {
    stroke: var(--blue, #007aff);
    stroke-dasharray: 10 5 10 5 15 100;
    animation: move-train 1.5s linear infinite;
    stroke-linecap: round;
}

@keyframes rotate-loader {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes move-train {
    0% {
        stroke-dashoffset: 125;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes alu-bounce-shake {

    0%,
    90% {
        transform: translateY(0) rotate(0);
    }

    92% {
        transform: translateY(-10px) rotate(-10deg);
    }

    94% {
        transform: translateY(0) rotate(10deg);
    }

    96% {
        transform: translateY(-5px) rotate(-5deg);
    }

    98% {
        transform: translateY(0) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes alu-label-attention {

    0%,
    90% {
        transform: translateY(-50%) translateX(0);
    }

    92% {
        transform: translateY(-50%) translateX(-8px) scale(1.05);
    }

    94% {
        transform: translateY(-50%) translateX(5px) scale(1.05);
    }

    96% {
        transform: translateY(-50%) translateX(-4px) scale(1.05);
    }

    98% {
        transform: translateY(-50%) translateX(2px) scale(1.05);
    }

    100% {
        transform: translateY(-50%) translateX(0) scale(1);
    }
}


@media (max-width: 768px) {
    #detailsWrapper.pane-mid.graphic-tab-active .dp-header-buttons {
        display: none !important;
    }

    #detailsWrapper.pane-mid.graphic-tab-active .dp-header-title-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    #detailsWrapper.pane-mid.graphic-tab-active .dp-header-name {
        margin-bottom: 0 !important;
    }

    #detailsWrapper.pane-full .dp-header-buttons {
        display: none !important;
    }
}

/* ============================================================
 * MOBILE LANDSCAPE — Orientation layout adjustments
 * Applies when device is short (≤500px height) and landscape
 * Purely additive — does NOT override or remove any existing rules
 * ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {

    /* 1. TOP BAR — compact single row */
    .top-container {
        flex-direction: row !important;
        gap: 8px;
        top: 6px;
        left: 8px;
        right: 8px;
        align-items: center;
    }

    /* Branding: collapsed (logo-only) by default di landscape */
    .branding-panel {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 5px 8px !important;
        border-radius: 12px !important;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* Sembunyikan title, lang switcher, user menu, chevron saat collapsed */
    .branding-panel .branding-title,
    .branding-panel .branding-right {
        display: none !important;
        overflow: hidden !important;
        max-width: 0 !important;
        opacity: 0;
        transition: all 0.3s ease;
    }

    /* HUD: collapsed by default di landscape (hanya baris utama) */
    .top-hud {
        flex-shrink: 0 !important;
        padding: 5px 10px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        gap: 6px !important;
        cursor: pointer;
    }

    /* Paksa HUD selalu collapsed di landscape (extend inline style @media) */
    @media (max-height: 500px) and (orientation: landscape) {
        .top-hud:not(.expanded) .hud-extra-stats {
            display: none !important;
        }

        .top-hud.expanded .hud-extra-stats {
            display: flex !important;
        }

        #hudExpandIcon {
            display: inline-block !important;
        }
    }

    .branding-title {
        font-size: 14px;
    }

    /* 2. DETAILS WRAPPER — floating side panel kiri, seperti desktop */
    .details-wrapper {
        left: 20px !important;
        top: 60px !important;
        bottom: 10px !important;
        width: 265px !important;
        height: auto !important;
        transform: none !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 24px !important;
        overflow: visible !important;
    }

    /* Collapsed: slide ke kiri termasuk offset margin */
    .details-wrapper.collapsed {
        transform: translateX(calc(-100% - 20px)) !important;
    }

    /* pane-mid / pane-full → reset ke floating side panel */
    .details-wrapper.pane-mid,
    .details-wrapper.pane-full {
        width: 265px !important;
        height: auto !important;
        top: 60px !important;
        bottom: 10px !important;
        left: 20px !important;
        transform: none !important;
        z-index: 1200 !important;
    }

    /* details-panel: pertahankan border-radius floating */
    .details-panel {
        width: 100% !important;
        border-radius: 24px !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* Content tabs: pastikan bisa scroll dan mengisi tinggi pane */
    #pane-col1 {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #train-detail-header-wrapper {
        flex-shrink: 0 !important;
    }

    #tab-content-info,
    #tab-content-schedule,
    #tab-content-graphic {
        overflow-y: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    #panelContent {
        overflow-y: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    /* 3. MOBILE PANE CONTROLS — sembunyikan, pakai toggle-tab */
    .mobile-pane-controls {
        display: none !important;
    }

    /* 4. TOGGLE TAB — sesuaikan posisi dengan floating pane menggunakan variable */
    .details-wrapper {
        --tab-top: 60px;
    }

    .toggle-tab,
    .expand-tab,
    .search-tab,
    .share-tab {
        position: absolute !important;
        width: 28px !important;
        height: 42px !important;
        right: -28px !important;
        font-size: 14px !important;
        display: flex !important;
    }

    .toggle-tab {
        top: var(--tab-top) !important;
    }

    .expand-tab {
        top: calc(var(--tab-top) + 52px) !important;
    }

    .search-tab {
        top: calc(var(--tab-top) + 104px) !important;
    }

    .share-tab {
        top: calc(var(--tab-top) + 156px) !important;
    }

    .details-wrapper:not(.has-expand-tab) .search-tab {
        top: calc(var(--tab-top) + 52px) !important;
    }

    .details-wrapper:not(.has-expand-tab) .share-tab {
        top: calc(var(--tab-top) + 104px) !important;
    }


    /* 6. CONTROLS CONTAINER — kanan bawah, column */
    .controls-container {
        bottom: 10px !important;
        right: 10px !important;
        top: auto !important;
        gap: 6px !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Zoom group: column flow */
    .controls-group:has(#zoomInBtn) {
        flex-direction: column !important;
    }

    /* Prevent android button from centering when controls container expands */
    #downloadAppBtn {
        margin: 0 0 10px 0 !important;
    }

    /* 6b. MENU EXPANDABLE — expand horizontal ke kiri, ⋮ di kanan */
    .controls-group:has(#expandMenuBtn) {
        flex-direction: row !important;
        align-items: center !important;
    }

    #expandableMenu {
        flex-direction: row !important;
        max-height: none !important;
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        transition: max-width 0.3s ease, opacity 0.3s ease !important;
        gap: 4px !important;
    }

    #expandableMenu.open {
        max-width: 260px !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* 7. FLOATING MOBILE BUTTONS — hidden (ada toggle-tab) */
    #mobileSearchBtn,
    .mobile-floating-pane-container {
        display: none !important;
    }

    /* 8. FLOATING TOAST — sesuaikan posisi */
    .floating-toast {
        top: 60px;
        font-size: 11px;
        padding: 8px 14px;
    }

    /* 9. WATERMARK — agar tidak tertutup controls */
    .aluline-map-watermark {
        bottom: 28px !important;
        font-size: 9px;
    }

    /* 10. SPLASH SCREEN — scale down teks */
    #aluline-splash-heading {
        font-size: 1.85rem;
        letter-spacing: -0.02em;
    }

    #aluline-splash-subheading {
        font-size: 0.88rem;
        margin-bottom: 1.5rem;
    }

    .splash-content-wrapper {
        padding: 1rem;
    }

    /* 11. CONTROLS GROUP — glass-btn lebih kecil */
    .controls-container {
        gap: 6px !important;
    }

    .controls-group {
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 12px !important;
    }

    .glass-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    /* 12. TRAIN DETAIL HEADER — satu baris kompak */

    /* Wrapper: flex row + wrap agar tabs bisa turun baris */
    #train-detail-header-wrapper {
        padding: 5px 8px 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
    }

    /* Back button — square and compact */
    #train-detail-header-wrapper .btn-full.desktop-back-btn {
        flex-shrink: 0 !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }

    #train-detail-header-wrapper .btn-full.desktop-back-btn i {
        font-size: 13px !important;
        display: block !important;
    }

    /* Section title — ambil sisa ruang, reset inline style */
    #train-detail-header-wrapper .section-title {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Inner flex row di section-title: nowrap */
    #train-detail-header-wrapper .section-title>div {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        align-items: center !important;
    }

    /* Title container: ubah dari column → row */
    #train-detail-header-wrapper .dp-header-title-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Nama kereta: kecil, 1 baris, ellipsis */
    #train-detail-header-wrapper .dp-header-name {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 90px !important;
        line-height: 1.2 !important;
        word-break: normal !important;
    }

    /* Stats: 1 baris, no wrap, kecil */
    #train-detail-header-wrapper .dp-header-stats {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 3px !important;
        align-items: center !important;
        font-size: 10px !important;
    }

    #train-detail-header-wrapper .dp-header-stats span {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }

    /* Follow + GPS button */
    #train-detail-header-wrapper .dp-header-buttons {
        display: flex !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
    }

    #train-detail-header-wrapper .dp-header-buttons button {
        padding: 4px 8px !important;
        font-size: 12px !important;
        border-radius: 5px !important;
    }

    /* Train tabs: full-width, ke baris ke-2 */
    #train-detail-header-wrapper ul.train-tabs {
        flex-basis: 100% !important;
        width: 100% !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
    }

    #train-detail-header-wrapper ul.train-tabs li {
        padding: 5px 2px !important;
        font-size: 11px !important;
    }

    /* 13. PANE OPEN — sembunyikan branding, naikkan pane ke ujung atas */
    body:has(.details-wrapper:not(.collapsed)) .branding-panel {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.8) !important;
        transition: opacity 0.2s, transform 0.2s !important;
    }

    body:has(.details-wrapper:not(.collapsed)) .details-wrapper {
        top: 25px !important;
        --tab-top: 25px;
    }

    body:has(.details-wrapper.pane-expanded) .details-wrapper {
        --tab-top: 70px;
    }

    body:has(.details-wrapper.pane-expanded) .controls-group:has(#zoomInBtn),
    body:has(.details-wrapper.pane-expanded) #downloadAppBtn {
        display: none !important;
    }



    /* Pastikan pane mengisi ruang dengan benar: override --panel-width di landscape */
    .details-wrapper:not(.collapsed) {
        --panel-width: 265px !important;
    }

    /* details-panel: flex column, fill full height */
    .details-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 14. ANIMATION LOG — hide ketika HUD collapsed */
    .top-hud:not(.expanded) .anim-debug-only {
        display: none !important;
    }

    .top-hud.expanded .anim-debug-only {
        display: flex !important;
    }

    /* Zoom group tidak melebar */
    .controls-group:not(:has(#expandMenuBtn)) {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        flex-shrink: 0 !important;
    }

    .controls-group:not(:has(#expandMenuBtn)) .glass-btn {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        flex-shrink: 0 !important;
    }

    /* 16. PANE CONTENT — font lebih kecil di landscape */
    #panelContent,
    #tab-content-info,
    #tab-content-schedule {
        font-size: 12px !important;
    }

    #panelContent p,
    #panelContent div,
    #tab-content-info p,
    #tab-content-info div {
        font-size: 12px !important;
    }

    /* 17. HIDE distance + duration pills di header landscape */
    #train-detail-header-wrapper .dp-header-stats {
        display: none !important;
    }

    /* 18. PANE-EXPANDED di landscape — full width (memanfaatkan seluruh lebar layar) */
    .details-wrapper.pane-expanded {
        left: 20px !important;
        right: 60px !important;
        width: auto !important;
        max-width: none !important;
        top: 8px !important;
        bottom: 8px !important;
        --panel-width: 200px !important;
    }

    .details-wrapper.pane-expanded .details-panel {
        width: 100% !important;
    }

    .details-wrapper.pane-expanded #pane-cols-wrapper {
        flex-direction: row !important;
        height: 100% !important;
    }

    .details-wrapper.pane-expanded #pane-col1 {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 0 !important;
    }

    .details-wrapper.pane-expanded #pane-col23 {
        flex: 1 !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
    }
}

/* Nav Mode Oversized Container */
#aluline-map.nav-mode-active {
    width: 150vmax !important;
    height: 150vmax !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -75vmax !important;
    margin-left: -75vmax !important;
    position: absolute !important;
    transition: transform 0.1s linear;
}

/* Hide overflow of map area */
.map-area {
    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 1 !important;
}

/* ─── OVERFLOW FIXES ────────────────────────────────────────────── */

/* Trip progress bar & segment text: prevent horizontal overflow inside panel content */
.details-panel.train-detail-mode #panelContent,
.details-panel #panelContent {
    overflow-x: hidden;
}

/* Tab-content areas: clip horizontal overflow in non-expanded (single-column) mode */
.details-wrapper:not(.pane-expanded) #tab-content-info,
.details-wrapper:not(.pane-expanded) #tab-content-schedule,
.details-wrapper:not(.pane-expanded) #tab-content-graphic {
    overflow-x: hidden;
}

/* Graphic tab in single-column mode: prevent horizontal overflow */
.details-wrapper:not(.pane-expanded) #tab-content-graphic {
    overflow-x: hidden !important;
}

/* Route overview and bento items: limit to panel width in single-column */
.details-wrapper:not(.pane-expanded) .graphic-container,
.details-wrapper:not(.pane-expanded) .bento-item,
.details-wrapper:not(.pane-expanded) .metro-map-2d {
    max-width: 100%;
    overflow-x: hidden;
}

/* ─── PANE RIGHT EDGE FIX ───────────────────────────────────────── */

/* Ensure side tabs connect smoothly with the panel right edge */
.toggle-tab,
.search-tab,
.share-tab,
.expand-tab {
    /* Slight left gap so tab visually connects with panel border-radius */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Smooth right edge transition by ensuring panel right side uses consistent radius */
.details-wrapper:not(.pane-expanded) .details-panel {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}


/* ==========================================================================
   TUTORIAL OVERLAY
   ========================================================================== */

#alurail-tutorial-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: none;
}

#alurail-tutorial-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#alurail-tutorial-cutout {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.alurail-tutorial-dialog {
    position: absolute;
    width: 340px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: var(--glass-bg, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: var(--text-main);
    pointer-events: auto;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    opacity: 0;
    transform: translateY(10px);
    animation: tutorialSlideIn 0.4s forwards;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: inherit;
}

body.dark-mode .alurail-tutorial-dialog,
body.dark-theme .alurail-tutorial-dialog {
    background: rgba(24, 24, 27, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

@keyframes tutorialSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alurail-tutorial-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
}

.alurail-tutorial-text {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.45;
}

.alurail-tutorial-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.alurail-tutorial-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.alurail-tutorial-btn:hover {
    background: var(--hover-bg);
    color: var(--text-main);
}

.alurail-tutorial-btn-primary {
    background: var(--blue, #ee417d) !important;
    color: #fff !important;
    padding: 8px 16px;
}

.alurail-tutorial-btn-primary:hover {
    background: var(--blue, #ee417d) !important;
    filter: brightness(1.1) !important;
    color: #fff !important;
}



/* ============================================================
 * NEARBY TRAINS UI
 * ============================================================ */
.nearby-trains-pane {
    position: absolute;
    z-index: 2000;
    width: 320px;
    max-width: 90vw;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nearby-header {
    background: rgba(var(--brand-main-rgb), 0.1);
    padding: 10px 15px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
}

.nearby-minimize-btn {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nearby-minimize-btn:hover {
    opacity: 1;
}

.nearby-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nearby-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark-mode .nearby-item {
    background: rgba(0, 0, 0, 0.3);
}

.nearby-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nearby-item-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
}

.nearby-item-status {
    font-size: 11px;
    color: var(--text-sub);
}

.nearby-item-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.nearby-item-eta {
    font-weight: 700;
    font-size: 14px;
    color: var(--brand-main);
}

.nearby-item-dist {
    font-size: 10px;
    color: var(--text-sub);
}

.nearby-trains-min {
    position: absolute;
    z-index: 2000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    font-size: 16px;
    color: var(--text-main);
}

.nearby-trains-min:hover {
    filter: brightness(1.1);
}

.nearby-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Positioning based on screen size */
@media (min-width: 769px) {
    .nearby-trains-pane {
        bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 320px;
    }

    .nearby-trains-min {
        bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 140px;
        height: 48px;
        border-radius: 12px;
        justify-content: flex-start;
        padding-left: 15px;
    }

    .nearby-trains-min:hover {
        transform: translateX(-50%);
        filter: brightness(1.1);
    }

    .nearby-trains-min i {
        margin-right: 8px;
    }

    .nearby-trains-min::after {
        content: 'Kereta Mendekat';
        font-size: 13px;
        font-weight: 700;
    }
}

@media (max-width: 768px) {
    .nearby-trains-pane {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        /* Comfortable clearance above bottom dock and from side buttons */
        left: 74px !important;
        right: 74px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 38vh !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
        transform: none !important;
    }

    .nearby-trains-min {
        position: fixed !important;
        bottom: calc(186px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
        transform: none !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }

    .nearby-trains-min:not([style*="display: none"]) {
        display: flex !important;
    }

    .nearby-trains-min[style*="display: none"] {
        display: none !important;
    }

    .nearby-trains-pane:not([style*="display: none"]) ~ .nearby-trains-min,
    .nearby-trains-pane:not([style*="display: none"]) + .nearby-trains-min {
        display: none !important;
    }

    .nearby-trains-min i,
    .nearby-trains-min iconify-icon {
        margin-right: 0 !important;
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .nearby-trains-min:hover {
        transform: none !important;
        filter: brightness(1.1) !important;
    }
}

/* Fix minimizing animation scaling */
.nearby-trains-min {
    transform-origin: center;
    /* Removed animation here because it interferes with translateX in desktop view.
       Instead, we apply it via JS or keep it simple. */
}

@keyframes shrinkIn {
    from {
        transform: translateX(-50%) scale(1.2);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    @keyframes shrinkIn {
        from {
            transform: scale(1.2);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }
}


/* Spotting HUD */
#spottingHud {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

#spottingHud b,
.spotting-title {
    font-family: 'Sulphur Point', sans-serif !important;
}

#spottingHud span {
    font-weight: 500;
    font-size: 14px;
}

#spottingHud label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
}

#spottingHud input[type="checkbox"] {
    cursor: pointer;
}

.spotter-tooltip {
    background-color: var(--blue) !important;
    color: white !important;
    border: none !important;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.spotter-tooltip::before {
    border-top-color: var(--blue) !important;
}

/* Hide scrollbars for specific containers */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


.filter-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.filter-modal-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .filter-modal-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .filter-modal-subgrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #filterModal .modal-content {
        max-height: 80vh;
        overflow-y: auto;
    }
}


@media (max-width: 768px) {
    #settingsModal .modal-close {
        position: sticky;
        top: 0;
        float: right;
        margin: 0;
        z-index: 100;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 2px solid var(--blue);
        background: var(--blue);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }

    #settingsModal .modal-close:hover {
        background: var(--bg-card);
        color: var(--blue);
    }
}



/* Spotting HUD */
#spottingHud {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

#spottingHud span {
    font-weight: 500;
    font-size: 14px;
}

#spottingHud label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
}

#spottingHud input[type="checkbox"] {
    cursor: pointer;
}

.spotter-tooltip {
    background-color: var(--blue) !important;
    color: white !important;
    border: none !important;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.spotter-tooltip::before {
    border-top-color: var(--blue) !important;
}

/* Hide scrollbars for specific containers */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


.filter-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.filter-modal-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .filter-modal-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .filter-modal-subgrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #filterModal .modal-content {
        max-height: 80vh;
        overflow-y: auto;
    }
}


@media (max-width: 768px) {
    #settingsModal .modal-close {
        position: sticky;
        top: 0;
        float: right;
        margin: 0;
        z-index: 100;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 2px solid var(--blue);
        background: var(--blue);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }

    #settingsModal .modal-close:hover {
        background: var(--bg-card);
        color: var(--blue);
    }
}

/* Mobile Landscape Tweaks for Nearby Trains */
@media (max-height: 500px) and (orientation: landscape) {
    .nearby-trains-pane {
        bottom: 55px !important;
        left: 85% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        width: 230px !important;
        max-height: 55vh !important;
        z-index: 2000;
    }

    .nearby-trains-min {
        position: fixed !important;
        bottom: 182px !important;
        left: 14px !important;
        transform: none !important;
        right: auto !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        padding: 0 !important;
        z-index: 1010;
    }

    .nearby-trains-min::after {
        display: none !important;
        content: none !important;
    }

    .nearby-trains-min i {
        margin-right: 0 !important;
    }

    .nearby-trains-min:hover {
        transform: none !important;
    }

    .details-wrapper {
        z-index: 2005 !important;
    }

    .controls-container {
        flex-direction: row !important;
        align-items: flex-end !important;
    }

    .controls-group:has(#zoomInBtn) {
        flex-direction: row !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #downloadAppBtn {
        display: none !important;
    }

    #androidAppLabel {
        display: none !important;
    }
}

/* Fix menu close button in dark mode */
body.dark-mode #expandMenuBtn i.fa-xmark {
    color: white !important;
}

/* Override Fix menu close button in dark mode to match user preference */
body.dark-mode #expandMenuBtn.menu-open-active {
    background-color: #0778AA !important;
    border-color: #0778AA !important;
}

body.dark-mode #expandMenuBtn.menu-open-active i.fa-xmark {
    color: #35353C !important;
}

#expandMenuBtn.menu-open-active {
    background-color: #0778AA !important;
    border-color: #0778AA !important;
}

#expandMenuBtn.menu-open-active i.fa-xmark {
    color: #35353C !important;
}

/* Fix mobile nav close button color */
.mobile-nav-close {
    background-color: #0778AA !important;
}

.mobile-nav-close i {
    color: white !important;
}

body.dark-mode .mobile-nav-close {
    background-color: #0778AA !important;
}

body.dark-mode .mobile-nav-close i {
    color: #35353C !important;
}

/* ==========================================================================
   Special Livery & DT Marker Flashing & Active Assignment Indicator Styles
   ========================================================================== */

/* Ensure the marker circle border directly becomes the special livery outline with inverted fill */
.train-marker.special-livery-marker .marker-circle {
    border-style: solid !important;
    border-width: 2.5px !important;
    border-color: var(--special-c1, #f59e0b);
    background-color: var(--special-bg-base, #1e293b);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 1 Color Inverted Pulsing (Outline & Fill alternate in reverse, Text follows Outline) */
@keyframes aluSpecialBlink1 {

    0%,
    100% {
        border-color: var(--special-c1, #f59e0b);
        background-color: var(--special-bg-base, #1e293b);
        color: var(--special-c1, #f59e0b);
    }

    50% {
        border-color: var(--special-bg-base, #1e293b);
        background-color: var(--special-c1, #f59e0b);
        color: var(--special-bg-base, #ffffff);
    }
}

/* 2 Colors Inverted Alternating (Outline & Fill alternate in reverse, Text follows Outline) */
@keyframes aluSpecialBlink2 {

    0%,
    42% {
        border-color: var(--special-c1, #f59e0b);
        background-color: var(--special-c2, #ec4899);
        color: var(--special-c1, #f59e0b);
    }

    50%,
    92% {
        border-color: var(--special-c2, #ec4899);
        background-color: var(--special-c1, #f59e0b);
        color: var(--special-c2, #ec4899);
    }

    100% {
        border-color: var(--special-c1, #f59e0b);
        background-color: var(--special-c2, #ec4899);
        color: var(--special-c1, #f59e0b);
    }
}

/* 3 Colors Inverted Alternating (Outline & Fill cycle in reverse pairs, Text follows Outline) */
@keyframes aluSpecialBlink3 {

    0%,
    26% {
        border-color: var(--special-c1, #ea580c);
        background-color: var(--special-c3, #fbbf24);
        color: var(--special-c1, #ea580c);
    }

    33%,
    59% {
        border-color: var(--special-c2, #e11d48);
        background-color: var(--special-c1, #ea580c);
        color: var(--special-c2, #e11d48);
    }

    66%,
    92% {
        border-color: var(--special-c3, #fbbf24);
        background-color: var(--special-c2, #e11d48);
        color: var(--special-c3, #fbbf24);
    }

    100% {
        border-color: var(--special-c1, #ea580c);
        background-color: var(--special-c3, #fbbf24);
        color: var(--special-c1, #ea580c);
    }
}

.train-marker.special-pulse-1 .marker-circle {
    animation: aluSpecialBlink1 2.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-2 .marker-circle {
    animation: aluSpecialBlink2 3.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-3 .marker-circle {
    animation: aluSpecialBlink3 4.8s infinite ease-in-out !important;
}

/* Special Passenger Carriage Outline Flashing Only (Marker Fill, Label, and Hover remain Normal Assignment) */
.train-marker.has-special-carriage-outline:not(.special-livery-marker) .marker-circle {
    border-style: solid !important;
    border-width: 2.5px !important;
}

.train-marker.has-special-carriage-outline.special-carriage-pulse-1:not(.special-livery-marker) .marker-circle {
    animation: aluCarriageOutlineBlink1 2.8s infinite ease-in-out !important;
}

.train-marker.has-special-carriage-outline.special-carriage-pulse-2:not(.special-livery-marker) .marker-circle {
    animation: aluCarriageOutlineBlink2 3.8s infinite ease-in-out !important;
}

.train-marker.has-special-carriage-outline.special-carriage-pulse-3:not(.special-livery-marker) .marker-circle {
    animation: aluCarriageOutlineBlink3 4.8s infinite ease-in-out !important;
}

@keyframes aluCarriageOutlineBlink1 {
    0%, 100% {
        border-color: var(--special-c1, #f59e0b);
    }
    50% {
        border-color: var(--train-outline, #ffffff);
    }
}

@keyframes aluCarriageOutlineBlink2 {
    0%, 45% {
        border-color: var(--special-c1, #f59e0b);
    }
    55%, 100% {
        border-color: var(--special-c2, #ec4899);
    }
}

@keyframes aluCarriageOutlineBlink3 {
    0%, 30% {
        border-color: var(--special-c1, #ea580c);
    }
    33%, 63% {
        border-color: var(--special-c2, #e11d48);
    }
    66%, 96% {
        border-color: var(--special-c3, #fbbf24);
    }
    100% {
        border-color: var(--special-c1, #ea580c);
    }
}

/* Codification text animation: follows outline sequence with text shadow for sharp contrast */
.train-marker.special-livery-marker .marker-circle,
.train-marker.special-livery-marker .marker-codification-text {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.7);
}

.train-marker.special-pulse-1 .marker-codification-text {
    animation: aluSpecialTextBlink1 2.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-2 .marker-codification-text {
    animation: aluSpecialTextBlink2 3.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-3 .marker-codification-text {
    animation: aluSpecialTextBlink3 4.8s infinite ease-in-out !important;
}

@keyframes aluSpecialTextBlink1 {

    0%,
    100% {
        color: var(--special-c1, #f59e0b);
    }

    50% {
        color: var(--special-bg-base, #ffffff);
    }
}

@keyframes aluSpecialTextBlink2 {

    0%,
    42% {
        color: var(--special-c1, #f59e0b);
    }

    50%,
    92% {
        color: var(--special-c2, #ec4899);
    }

    100% {
        color: var(--special-c1, #f59e0b);
    }
}

@keyframes aluSpecialTextBlink3 {

    0%,
    26% {
        color: var(--special-c1, #ea580c);
    }

    33%,
    59% {
        color: var(--special-c2, #e11d48);
    }

    66%,
    92% {
        color: var(--special-c3, #fbbf24);
    }

    100% {
        color: var(--special-c1, #ea580c);
    }
}

/* Dot Inverted Flashing for Special Liveries (Same rhythm as marker, exact inverted colors) */
@keyframes aluSpecialDotBlink1 {

    0%,
    100% {
        border-color: var(--special-bg-base, #1e293b);
        background-color: var(--special-c1, #f59e0b);
    }

    50% {
        border-color: var(--special-c1, #f59e0b);
        background-color: var(--special-bg-base, #1e293b);
    }
}

@keyframes aluSpecialDotBlink2 {

    0%,
    42% {
        border-color: var(--special-c2, #ec4899);
        background-color: var(--special-c1, #f59e0b);
    }

    50%,
    92% {
        border-color: var(--special-c1, #f59e0b);
        background-color: var(--special-c2, #ec4899);
    }

    100% {
        border-color: var(--special-c2, #ec4899);
        background-color: var(--special-c1, #f59e0b);
    }
}

@keyframes aluSpecialDotBlink3 {

    0%,
    26% {
        border-color: var(--special-c3, #fbbf24);
        background-color: var(--special-c1, #ea580c);
    }

    33%,
    59% {
        border-color: var(--special-c1, #ea580c);
        background-color: var(--special-c2, #e11d48);
    }

    66%,
    92% {
        border-color: var(--special-c2, #e11d48);
        background-color: var(--special-c3, #fbbf24);
    }

    100% {
        border-color: var(--special-c3, #fbbf24);
        background-color: var(--special-c1, #ea580c);
    }
}

.train-marker.special-pulse-1 .marker-loco-dots .loco-dot {
    animation: aluSpecialDotBlink1 2.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-2 .marker-loco-dots .loco-dot {
    animation: aluSpecialDotBlink2 3.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-2.has-multi-loco .marker-loco-dots .dot-2 {
    animation-delay: -1.9s !important;
}

.train-marker.special-pulse-3 .marker-loco-dots .loco-dot {
    animation: aluSpecialDotBlink3 4.8s infinite ease-in-out !important;
}

.train-marker.special-pulse-3.has-multi-loco .marker-loco-dots .dot-2 {
    animation-delay: -1.6s !important;
}

.train-marker.special-pulse-3.has-multi-loco .marker-loco-dots .dot-3 {
    animation-delay: -3.2s !important;
}

/* ==========================================================================
   Special Livery Marker Label Styling (High-Contrast Livery Ribbon & Pill Badge)
   ========================================================================== */
.train-marker.special-livery-marker .marker-text {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    position: absolute !important;
    overflow: visible !important;
    /* Light Mode: Box color */
    background: var(--special-box-c-light, var(--special-dark-c, #1e293b)) !important;
    color: var(--special-box-text-light, #ffffff) !important;
}

/* Dark Mode: Box color */
body.dark-mode .train-marker.special-livery-marker .marker-text {
    background: var(--special-box-c-dark, var(--special-bright-c, #f8fafc)) !important;
    color: var(--special-box-text-dark, #ffffff) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Directional Triangle Pointers for Special Livery Markers */
.train-marker.special-livery-marker.dir-e .marker-text::after {
    border-color: var(--special-box-c-light, var(--special-dark-c, #1e293b)) transparent transparent transparent !important;
}

body.dark-mode .train-marker.special-livery-marker.dir-e .marker-text::after {
    border-color: var(--special-box-c-dark, var(--special-bright-c, #f8fafc)) transparent transparent transparent !important;
}

.train-marker.special-livery-marker.dir-w .marker-text::after {
    border-color: transparent transparent var(--special-box-c-light, var(--special-dark-c, #1e293b)) transparent !important;
}

body.dark-mode .train-marker.special-livery-marker.dir-w .marker-text::after {
    border-color: transparent transparent var(--special-box-c-dark, var(--special-bright-c, #f8fafc)) transparent !important;
}

.train-marker.special-livery-marker.dir-n .marker-text::after {
    border-color: transparent transparent transparent var(--special-box-c-light, var(--special-dark-c, #1e293b)) !important;
}

body.dark-mode .train-marker.special-livery-marker.dir-n .marker-text::after {
    border-color: transparent transparent transparent var(--special-box-c-dark, var(--special-bright-c, #f8fafc)) !important;
}

.train-marker.special-livery-marker.dir-s .marker-text::after {
    border-color: transparent var(--special-box-c-light, var(--special-dark-c, #1e293b)) transparent transparent !important;
}

body.dark-mode .train-marker.special-livery-marker.dir-s .marker-text::after {
    border-color: transparent var(--special-box-c-dark, var(--special-bright-c, #f8fafc)) transparent transparent !important;
}

/* Horizontal Livery Accent Ribbon Stripe across the entire top of the label */
.train-marker.special-livery-marker .marker-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    width: 100%;
    z-index: 2;
    border-radius: 6px 6px 0 0;
}

/* 1 Color: Solid horizontal stripe */
.train-marker.special-pulse-1 .marker-text::before {
    background: var(--special-c1, #f59e0b) !important;
}

/* 2 Colors: Criss-Cross / Silang with Number Box and Label Background */
.train-marker.special-pulse-2 .marker-text::before {
    background: linear-gradient(to right,
            var(--special-badge-c-light, var(--special-bright-c)) 0%,
            var(--special-badge-c-light, var(--special-bright-c)) 50%,
            var(--special-box-c-light, var(--special-dark-c)) 50%,
            var(--special-box-c-light, var(--special-dark-c)) 100%) !important;
}

body.dark-mode .train-marker.special-pulse-2 .marker-text::before {
    background: linear-gradient(to right,
            var(--special-badge-c-dark, var(--special-dark-c)) 0%,
            var(--special-badge-c-dark, var(--special-dark-c)) 50%,
            var(--special-box-c-dark, var(--special-bright-c)) 50%,
            var(--special-box-c-dark, var(--special-bright-c)) 100%) !important;
}

/* 3 Colors: Criss-Cross with middle accent */
.train-marker.special-pulse-3 .marker-text::before {
    background: linear-gradient(to right,
            var(--special-badge-c-light, var(--special-c3)) 0%,
            var(--special-badge-c-light, var(--special-c3)) 33.33%,
            var(--special-c2, #ffffff) 33.33%,
            var(--special-c2, #ffffff) 66.66%,
            var(--special-box-c-light, var(--special-c1)) 66.66%,
            var(--special-box-c-light, var(--special-c1)) 100%) !important;
}

body.dark-mode .train-marker.special-pulse-3 .marker-text::before {
    background: linear-gradient(to right,
            var(--special-badge-c-dark, var(--special-c1)) 0%,
            var(--special-badge-c-dark, var(--special-c1)) 33.33%,
            var(--special-c2, #ffffff) 33.33%,
            var(--special-c2, #ffffff) 66.66%,
            var(--special-box-c-dark, var(--special-c3)) 66.66%,
            var(--special-box-c-dark, var(--special-c3)) 100%) !important;
}

/* Train Name on Special Livery Marker */
.train-marker.special-livery-marker .marker-train-name {
    font-weight: 700;
    color: var(--special-box-text-light, #ffffff) !important;
    white-space: nowrap;
}

body.dark-mode .train-marker.special-livery-marker .marker-train-name {
    color: var(--special-box-text-dark, #ffffff) !important;
}

/* Train Number Pill Badge on Special Livery Marker */
.train-marker.special-livery-marker .marker-train-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    /* Light Mode: Badge color */
    background: var(--special-badge-c-light, var(--special-bright-c, #f8fafc)) !important;
    color: var(--special-badge-text-light, #ffffff) !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* Dark Mode: Badge color */
body.dark-mode .train-marker.special-livery-marker .marker-train-no {
    background: var(--special-badge-c-dark, var(--special-dark-c, #1e293b)) !important;
    color: var(--special-badge-text-dark, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

/* Special Livery Hover Tooltip & Integrated Architecture */
.custom-tooltip.special-tooltip {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    max-width: 295px !important;
    min-width: 245px !important;
}

.custom-tooltip.special-tooltip .tt-inner-body {
    padding: 11px 14px 11px 15px;
    position: relative;
    z-index: 2;
}

.custom-tooltip .tt-special-stripe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4.5px;
    border-radius: 8px 0 0 8px;
    z-index: 20;
    pointer-events: none;
}

.custom-tooltip .tt-special-stripe.special-pulse-1 {
    background: var(--special-c1, #f59e0b);
}

.custom-tooltip .tt-special-stripe.special-pulse-2 {
    background: linear-gradient(to bottom,
            var(--special-c1, #f59e0b) 0%,
            var(--special-c1, #f59e0b) 50%,
            var(--special-c2, #ffffff) 50%,
            var(--special-c2, #ffffff) 100%);
}

.custom-tooltip .tt-special-stripe.special-pulse-3 {
    background: linear-gradient(to bottom,
            var(--special-c1, #ef4444) 0%,
            var(--special-c1, #ef4444) 33.33%,
            var(--special-c2, #ffffff) 33.33%,
            var(--special-c2, #ffffff) 66.66%,
            var(--special-c3, #3b82f6) 66.66%,
            var(--special-c3, #3b82f6) 100%);
}

/* 1. PJKA Theme (Enamel Cream & Deep Forest Green) */
.custom-tooltip.tt-theme-pjka {
    border-color: #1c5230 !important;
}
body.dark-mode .custom-tooltip.tt-theme-pjka {
    background: rgba(20, 27, 22, 0.94) !important;
    border-color: #286b43 !important;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-pjka {
    background: rgba(250, 248, 242, 0.96) !important;
    border-color: #1c5230 !important;
}
.tt-header-pjka {
    background: #f5e7b2;
    border-bottom: 2.5px solid #1c5230;
    padding: 4.5px 10px 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.tt-header-pjka-left {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #143d22;
}
.tt-header-pjka-right {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 800;
    color: #143d22;
    background: rgba(20, 61, 34, 0.08);
    border: 1px solid rgba(20, 61, 34, 0.25);
    padding: 1px 5px;
    border-radius: 3px;
}
.tt-special-stripe.stripe-pjka {
    background: linear-gradient(to bottom, #f5e7b2 0%, #f5e7b2 45%, #1c5230 45%, #1c5230 100%) !important;
}
.tt-theme-pjka .tt-title {
    color: #164427 !important;
}
body.dark-mode .tt-theme-pjka .tt-title {
    color: #e2d19f !important;
}

/* PJKA Vintage Wahana Daya Pertiwi Watermark across Body behind Speed */
.custom-tooltip.tt-theme-pjka .tt-inner-body {
    position: relative;
    overflow: hidden;
}
.custom-tooltip.tt-theme-pjka .tt-inner-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzE4LjcxMiIgaGVpZ2h0PSIyMTIuNjc0IiB2aWV3Qm94PSIwIDAgODQuMzI2IDU2LjI3IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik01Ny41NjYuNzM3Yy0yLjMwMS0uNTYyLTMuOTAzIDEuNzQ4LTMuNjg2IDMuODY0LjgxOS41OTggMi4xMjggMi4xOTkgMy40MzMuODg1IDIuNDc3LS4yNzktLjQxIDMuMTA2IDEuNzM3IDQuMDQ0IDEuMTQ5IDEuMzcgMy43MTYtLjI3NyA0LjMwNCAxLjI1LTEuNTkxLjY5Ni0xLjA2NyAyLjY0OS4yMTEgMy4wMDYuNDA0IDEuMjQzIDMuODk5LS4yODYgMi45MDkgMS4wMzgtMi4zNzYuNzE4LS42ODYgMy41OTkgMS4xMDUgMy40ODcgMS45NzUtLjM4NiAxLjA0OSAxLjQ3Mi0uMzU1IDEuMzA3LTIuNTg1LjU1Mi0uMTk4IDMuNTQyIDEuMzMyIDMuNzMyIDEuODI1LS4wNTEuNDg5IDEuNDExLS43MDMuODg4LTIuMzgxLS40NDgtMS4xOTggMi42NTItLjM5NiAzLjUxMiAyLjQ2NS4yMjEuOTI2IDIuODgyLS44NDEgMS42NjMtMi40OTcgMS4wOTguMjA1IDMuODc5LjYzMiA1LjQ3OS0uOTEgMS45NDUtMy4wODItMS44NjYtNC4yMTIuNjYzLTEuNjkxIDEuNDgzIDEuOTkxIDMuMzIzLjA0IDQuNDE5LS43NDQtLjY2NC0xLjk1LTEuNjU1LTIuNjcyLTEuNTA4LS43MzQuMTUtMS41MzQgMS4yNjUtMS44MDMgMi4zNDUtLjA2MS45NDguMTU5IDEuODIzLjMyIDIuNTg0LS41MDkuNTUzLS43NTYuNTktMS45NTMgMS4yNjktMi43NCAxLjU5Ni01LjYwMSAyLjk3Ni04LjUwOSA0LjIzOCAxLjQ4NSAxLjY3NiAzLjMzNS0xLjEzNyA1LjAxNC0xLjM1MSAyLjI3NC0xLjE1OCA0LjQxNi0yLjU1MSA2LjYwOS0zLjg1MSAxLjk1OC4zNDggNC4yNy4yMTYgNS40OTMtMS40OTUtLjMzLS42NzItMS40MDMtMi40MjkuMjEyLTEuNDk2IDEuNjkzLjk4OCA1LjE5MS0xLjM4NCAzLjE2LTMuMDk2LTEuMTU5LS41MjgtMi40MzgtMi43NjQtLjItMi41MzcgMi4wODUuMDA0IDMuOTEtMi42MTYgMy43OTMtNC40MzItLjYzMS0uODYzLTQuMDc1LS45NzUtMS44OTQtMi4yMDcgMS45MjcuNDA0IDQuMDM0LTMuNzczIDEuNTA4LTMuNjI0LTIuMzMxLjQ5NS0yLjYzLTIuMjMxLS43NjYtMy4xMyAxLjU5Ny0uOTIzIDEuNDYzLTMuOTYxLS44NTMtMy4xMDktMi40NDUtLjA5MiAxLjUzMy0xLjI2OSAxLjgxNC0yLjIzMS42NjUtMy4wNTktMy4wNjctMS4zNTEtNC4yNDItMi41MjguNjUyLTEuNDE1IDEuMjA1LTMuMjQ0LS4xMDMtNC42MS0xLjM4My4wNzgtNC45NzMgMS45ODQtMy45OTUtLjk0NCAxLjMyMy0xLjcyLS41NjEtNC42NjMtMi42MzMtMy41MDQtMS42MiAxLjAyNS0zLjA5Mi4wNzEtMi4wMzctMS43MjkuMDE0LTEuMDU4LS44MDctMS45NjQtMS43NzMtMi4yOTF6IiBmaWxsPSIjYjg4NjBiIiBvcGFjaXR5PSIwLjk5OCIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KC45Njg2MjQgMCAwIC45Njg2MjQgLTUwLjc4NzA4OSAtMTAxLjQxNDIzKSIgc3Ryb2tlPSIjYjg4NjBiIiBmaWxsPSIjZGFhNTIwIj48ZyBzdHJva2Utd2lkdGg9Ii40Ij48cGF0aCBkPSJNODQuNTUzIDE0Ni41NjVsLTUuODExLTEuNTEyIDUuNjIyLTIuMzYyIDYuMTA1LTQuOTEzIDEuNDU0IDEuODN6Ii8+PHBhdGggZD0iTTkwLjQ2OSAxMzcuNzc3bC02LjEwNSA0LjkxMy00LjI2MiAxLjc5MS02LjMyMi01Ljc1OSA5LjA3MSAxLjg0MyA2LjkzNS0zLjk2NHoiLz48cGF0aCBkPSJNODkuNzg3IDEzNi42MDFsLS40OTUtMS4zNjYtNy40MzIgMi42ODQtOS44MjctNS42MjIgMy4xMDkgNi43MDIgNy43MSAxLjU2NnoiLz48dXNlIHhsaW5rOmhyZWY9IiNCIi8+PHVzZSB4bGluazpocmVmPSIjQyIvPjx1c2UgeGxpbms6aHJlZj0iI0QiLz48dXNlIHhsaW5rOmhyZWY9IiNFIi8+PHVzZSB4bGluazpocmVmPSIjRiIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxOTEuOTIxODQgLS4wNjU2NjkpIiBzdHJva2Utd2lkdGg9Ii40Ij48cGF0aCBkPSJNODQuNTUzIDE0Ni41NjVsLTUuODExLTEuNTEyIDUuNjIyLTIuMzYyIDYuMTA1LTQuOTEzIDEuNDU0IDEuODN6Ii8+PHBhdGggZD0iTTkwLjQ2OSAxMzcuNzc3bC02LjEwNSA0LjkxMy00LjI2MiAxLjc5MS02LjMyMi01Ljc1OSA5LjA3MSAxLjg0MyA2LjkzNS0zLjk2NHoiLz48cGF0aCBkPSJNODkuNzg3IDEzNi42MDFsLS40OTUtMS4zNjYtNy40MzIgMi42ODQtOS44MjctNS42MjIgMy4xMDkgNi43MDIgNy43MSAxLjU2NnoiLz48dXNlIHhsaW5rOmhyZWY9IiNCIi8+PHVzZSB4bGluazpocmVmPSIjQyIvPjx1c2UgeGxpbms6aHJlZj0iI0QiLz48dXNlIHhsaW5rOmhyZWY9IiNFIi8+PHVzZSB4bGluazpocmVmPSIjRiIvPjwvZz48L2c+PGcgc3Ryb2tlPSIjYjg4NjBiIj48cGF0aCBkPSJNMS43MDcgNDkuMTUxYzIuNzg2LS45MzYgNC4xNjMtLjMwNiA1LjU4My4xMzctMy4xMDYuMDQ5LTIuODM1IDIuNDUtMi43NDYgMy45ODIgMy41MDYtNC42NTIgOS4wMzYtMS4wNTggMTMuMDQ2LTIuMTk3bDcuMDktMi4wMTQtLjkxNS0zLjgzM2MtLjQyNS0uOTIxLTEuMDMxLS45Ni0yLjE3OS0uNzM4LTEyLjIxNyAzLjI0NC05Ljc3OC40NTgtMTIuOTM0Ljk2NC0zLjI4OC41MjctNi45NDYgMy42OTgtNi45NDYgMy42OTh6IiBmaWxsPSIjZGFhNTIwIiBzdHJva2Utd2lkdGg9IjAuNTgxIi8+PHBhdGggZD0iTTIxLjEzOSA0Ny41MDhjLjM5LTEuNDI4IDIuNjU0LS43NzkgMi42MjctMi4yODEiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMC42NDQiLz48ZyBmaWxsPSIjZGFhNTIwIiBzdHJva2Utd2lkdGg9IjAuNTgxIj48cGF0aCBkPSJNODIuNzY5IDQ5LjE1MWMtMi43ODYtLjkzNi00LjE2My0uMzA2LTUuNTgzLjEzNyAzLjEwNi4wNDkgMi44MzUgMi40NSAyLjc0NiAzLjk4Mi0zLjUwNi00LjY1Mi05LjAzNi0xLjA1OC0xMy4wNDYtMi4xOTdsLTcuMDktMi4wMTQuOTE1LTMuODMzYy40MjUtLjkyMSAxLjAzMS0uOTYgMi4xNzktLjczOCAxMi4yMTcgMy4yNDQgOS43NzguNDU4IDEyLjkzNC45NjQgMy4yODguNTI3IDYuOTQ2IDMuNjk4IDYuOTQ2IDMuNjk4eiIvPjxwYXRoIGQ9Ik0yMS4xMzkgNDcuNTA4bC0xLjg3NyA0Ljg1NGM2LjcwMyAyLjQ5NyAxNy40NTYgMi45NjQgMjIuOTc2IDIuOTY0czE2LjI3My0uNDY3IDIyLjk3Ni0yLjk2NGwtMS44NzctNC44NTRjLTYuNTQ2IDIuODE5LTEzLjk1OCAzLjcwNi0yMS4wOTkgMy43MDZzLTE1LjM1Ni0uMjU2LTIxLjA5OS0zLjcwNnoiLz48L2c+PHBhdGggZD0iTTYzLjMzNyA0Ny41MDhjLS4zOS0xLjQyOC0yLjY1NC0uNzc5LTIuNjI3LTIuMjgxIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjAuNjQ0Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEuNTk2MTI1IC0uMDgwNDE4IC4wODA0MTggMS41OTYxMjUgLTEyMS4xMDY3NzggLTIwOC41ODQ4NCkiIGZpbGw9IiNiODg2MGIiPjxwYXRoIGQ9Ik04Mi4wOTQgMTY2LjI3bC4yNzQuMDYyLjA3IDEuMTUuNTQ5LS45MjIuMjA1LjA0Ni4xMDEgMS4wNjguNTU2LTEuMDEuMjc0LjA2Mi0uNzcxIDEuMzY4LS4yNTQtLjA1Ny0uMTAyLTEuMDM4LS41MzYuODk0LS4yNTQtLjA1N3ptMi41NDYuNTYxbC4xOTguMDQxLjI4MSAxLjU5NS0uMjg2LS4wNTktLjA1MS0uMzQ0LS41NjQtLjExNy0uMTg1LjI5NS0uMjg5LS4wNnptLjEwNi45ODlsLS4wODYtLjU3OS0uMzExLjQ5NnptLjg1My0uNzkybC4yNjYuMDUtLjExNy42MTcuNjQ3LjEyMy4xMTctLjYxNy4yNjYuMDUtLjI4MSAxLjQ3OC0uMjY2LS4wNS4xMTctLjYxNy0uNjQ3LS4xMjMtLjExNy42MTctLjI2Ni0uMDV6bTEuOTQ5LjM1OGwuMTk5LjAzNC4zMzkgMS41ODMtLjI4OC0uMDQ5LS4wNjQtLjM0Mi0uNTY4LS4wOTYtLjE3NC4zMDItLjI5MS0uMDQ5em0uMTQyLjk4NGwtLjEwNy0uNTc1LS4yOTIuNTA4em0xLjk2Ni0uNjU1bC0uMjE5IDEuNDg4LS4yNjgtLjAzOS0uNDctMS4xMzctLjE1NCAxLjA0Ni0uMjU3LS4wMzguMjE5LTEuNDg4LjI2NS4wMzkuNDczIDEuMTMzLjE1My0xLjA0MXptLjc2NS4wOTdsLjIwMS4wMjQuNDE0IDEuNTY1LS4yOS0uMDM1LS4wOC0uMzM5LS41NzItLjA2OS0uMTYuMzEtLjI5My0uMDM2em0uMTg4Ljk3NmwtLjEzNS0uNTctLjI2OC41MjF6bTEuMjgtLjgxM2wuNDM1LjAzNnEuMjU0LjAyMS40Mi4xMjUuMTY4LjEwMy4yNDEuMjguMDc1LjE3Ny4wNTQuNDIxLS4wMi4yMzMtLjEyNS4zOTEtLjEwNC4xNTgtLjI4Ni4yMy0uMTgyLjA3Mi0uNDMzLjA1MWwtLjQzMy0uMDM2em0uMzAxIDEuMjg2cS4yNjIuMDIyLjQxLS4wODMuMTQ5LS4xMDUuMTcxLS4zNzUuMDE1LS4xNzktLjAyOC0uMjkzLS4wNDMtLjExNS0uMTUxLS4xNzUtLjEwOC0uMDYxLS4yOTQtLjA3N2wtLjE2MS0uMDEzLS4wODQgMS4wMDV6bTEuNS0xLjE1MmwuMjAyLjAxMS41MTUgMS41MzUtLjI5MS0uMDE2LS4xMDItLjMzMy0uNTc1LS4wMzItLjEzOS4zMi0uMjk0LS4wMTZ6bS4yNTEuOTYybC0uMTcxLS41Ni0uMjM0LjUzN3ptLjg4MS4wMDVsLS41MzgtLjkzMy4zMjcuMDA5LjM1Ni42NjguMzk2LS42NDcuMzI5LjAwOS0uNTg4LjkwMS0uMDE3LjU4Ni0uMjgyLS4wMDh6bTEuMjY0LS44OTloLjIwMmwuNjAyIDEuNTAzaC0uMjkybC0uMTIxLS4zMjctLjU3Ni4wMDEtLjEyMS4zMjdoLS4yOTV6bS4zMDYuOTQ2bC0uMjAzLS41NDktLjIwMi41NXptMS4xNjQtLjk2OWwuNDcxLS4wMjFxLjE1NC0uMDA3LjI3Ny4wNDEuMTIyLjA0Ny4xOTUuMTQ1LjA3Mi4wOTcuMDc5LjIzNS4wMDYuMTM3LS4wNTguMjM4LS4wNjQuMTAxLS4xODIuMTU3LS4xMTguMDU2LS4yNzIuMDYzbC0uMjAzLjAwOS4wMjguNjIzLS4yNjguMDEyem0uNDk5LjYwN3EuMTM2LS4wMDYuMTk3LS4wNTQuMDYyLS4wNDkuMDU4LS4xNC0uMDA4LS4xOTItLjI3MS0uMTgxbC0uMjAzLjAwOS4wMTcuMzc1em0uNzItLjY2NWwuOTk4LS4wNzMuMDE4LjI0Ny0uNzI4LjA1My4wMjguMzc5LjY3OC0uMDQ5LjAxOC4yNDctLjY3OC4wNDkuMDI3LjM3Mi43MjgtLjA1My4wMTkuMjU1LS45OTguMDczem0xLjI3OS0uMDk4bC40ODQtLjA0OXEuMTQyLS4wMTQuMjY1LjAyNy4xMjQuMDQuMjA0LjEzNC4wOC4wOTMuMDk0LjIyOC4wMDkuMDkyLS4wMi4xNzQtLjAyOS4wODEtLjA5LjE0NC0uMDYuMDYzLS4xNDMuMTAxbC40ODMuNjI0LS4zMDguMDMxLS40MzMtLjYwMy0uMDg3LjAwOS0uMDkzLjAwOS4wNjQuNjQtLjI2OS4wMjd6bS41NzMuNTg2cS4xMDctLjAxNS4xNjItLjA3My4wNTUtLjA1OC4wNDctLjE0My0uMDA5LS4wOTMtLjA4My0uMTQxLS4wNzMtLjA0OS0uMTg4LS4wMzhsLS4yMTUuMDIyLjA0LjM5N3oiLz48cGF0aCBkPSJNMTAxLjY4NiAxNjguMDYzbC0uNDY4LjA1OS0uMDMtLjI0IDEuMjAzLS4xNTIuMDMuMjQtLjQ2Ny4wNTkuMTU4IDEuMjUzLS4yNjguMDM0em0uODk0LS4zNjJsLjI2OC0uMDM4LjIxMyAxLjQ4OS0uMjY4LjAzOHptLjQ1My0uMDU4bC4yNzctLjA0Ni40OTcgMS4wNC4xNjItMS4wNjEuMjA3LS4wMzQuNDk1Ljk1Mi4xMzUtMS4xNDUuMjc3LS4wNDYtLjIgMS41NTgtLjI1Ny4wNDMtLjQ4NS0uOTIzLS4xNjEgMS4wMy0uMjU3LjA0M3ptMi4yNC0uMzgxbC4yNjYtLjA0OS4yNzQgMS40NzktLjI2Ni4wNDl6Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KC45Njg2MjQgMCAwIC45Njg2MjQgLTUwLjgzMDcxMSAtMTAxLjQxNDIzKSI+PGcgc3Ryb2tlPSIjYjg4NjBiIiBmaWxsPSIjZGFhNTIwIj48cGF0aCBkPSJNOTIuNTk3IDEyNi44NDNjLS4zMTggMS40MTItNi40MzUgNS40OS0xLjY3MSAxMS41NmwxLjA0MiAxLjIwNSA4LjA3Ni0uMDY2Ljk3Mi0xLjEzOWM0LjU3MS02LjQ1My0xLjM2OS0xMC4wMjMtMS41MzYtMTEuNTI2eiIgc3Ryb2tlLXdpZHRoPSIwLjI2NSIvPjxwYXRoIGQ9Ik05Ni4wMDYgMTI4LjcwM2w0LjIyNiAzLjA3LTEuNjE0IDQuOTY4aC01LjIyNGwtMS42MTQtNC45Njh6IiBzdHJva2Utd2lkdGg9Ii40NDgiIHBhaW50LW9yZGVyPSJtYXJrZXJzIGZpbGwgc3Ryb2tlIiBvcGFjaXR5PSIwLjk5OCIvPjwvZz48cGF0aCBkPSJNOTMuNjQ2IDEzNS4xNTl2LTMuODU3aC40OTd2MS43MTNsMS4wMDUtMS43MTNoLjY2OWwtLjkyOCAxLjUwMi45NzggMi4zNTVoLS42NDRsLS42NzctMS44MS0uNDAzLjY0NXYxLjE2NXptNS4wMjEgMGgtLjU0MWwtLjIxNS0uODc2aC0uOTg1bC0uMjAzLjg3NmgtLjUyOGwuOTU5LTMuODU3aC41MjZ6bS0uOTE2LTEuNTI2bC0uMzM5LTEuNDMxLS4zMzMgMS40MzF6IiBmaWxsPSIjYjg4NjBiIi8+PGcgc3Ryb2tlPSIjYjg4NjBiIiBmaWxsPSIjZGFhNTIwIj48cGF0aCBkPSJNOTMuOTQ0IDEyMy45MTFjLS41NzIgMi4zMTktMi4wMTggMy42MjQtMy4wMzUgNS4yMTJsMi4zODItMS43MDRjLjMwOC4zOTYtLjI5MSAxLjI0Mi0uNjUzIDEuOTcxbDIuMzA1LTIuMjM4Yy4yMzkuNjU3LjI0IDEuMzE0LS41MzggMS45NzFsMS44MDYtMS42MDRjLjE4NCAxLjE4NCAxLjAzIDEuNDQ5IDEuNjkgMS45NzEtLjI0My0uNzQ2LS43MTItMS40OTItLjM4NC0yLjIzOC40OS43NC43NTEgMS41NjggMi4xMTMgMS45NzEtLjY1Mi0uNzEzLS41NzctMS40MjUtLjQyMy0yLjEzOC41NTIgMS40OTggMS41MDcgMS41OTcgMi4zNDMgMi4xMDUtMS42NjktMS43MTMtMS45NTctMy4zNTEtMi40Mi01LjI3OXoiIHN0cm9rZS13aWR0aD0iLjI4NCIvPjxwYXRoIGQ9Ik05MC45ODggMTIxLjQ1NGMuNjUtLjYwNyAxLjM1Ny0xLjIxOSAyLjQ0Mi0uOTIuMDc1LS40NTMuMTk1LS45NTguOTAzLTEuMjI3Ljc0OS0uMjg0IDMuMDg3LjQxIDQuNzE2LS4zMTYtLjU0Mi43MjEtLjc0NC41OTEtMS4xODQgMS4yMDEuNDA0LS4xNS45NS0uMzQzIDEuMTg1LS41MTQtLjM2Ljc3OC0uMzE3LjgzMS0uODEyIDEuMzI2LjI0OC40OTcuODcxLjk1OSAxLjIxOCAxLjM1OC0uMjIyLjAzMy0uNTY1LS4wNTQtLjk0My0uMTc3LS4wMDEgMS4xODQgMS4wMzYgMi4yMzIgMS42NzkgMy4zMDMtLjY4Mi0uNTE3LTEuMDktMS41MDktMS44ODctMS41OC0uNDAyLjM4Ni4xMTQgMS4yNS4zIDEuODYzLS44Ni0uMzEyLS45NDgtMS4zMTItMS40NTUtMS43MTctLjQwNS40NC0uMjg0IDEuMTE0LS40NTggMS41NTUtLjA5Ny0uNTU0LS41MzUtMS4xNjgtLjk1Ny0xLjQ3MS0uNjEuMzIyLS42NjggMS4xNjItMS4wNTYgMS43ODQtLjE3NS0uNjU4LS4yNDgtMS41Ni0uNDg3LTEuODU0LS43MjEuNjY5LTEuMjM0Ljg0NS0xLjgxNCAxLjEzNy42MzctMS4wMDkgMS4zMTctMi4wMjkgMS4xOTYtMi44NTUtMS41MzkuMjI5LTEuNDY1LS4zMjMtMS43ODItLjY4NC43MzkuMTgxIDEuNjkzLjIyMSAyLjA1MSAwLS43MDEtLjQ1Mi0xLjUzLS40NjctMi44NTctLjIxMnoiIHN0cm9rZS13aWR0aD0iLjI2OSIvPjwvZz48Y2lyY2xlIGN4PSI5NC45NTkiIGN5PSIxMjAuNDQ5IiByPSIuNTU1IiBwYWludC1vcmRlcj0ibWFya2VycyBmaWxsIHN0cm9rZSIgZmlsbD0iI2I4ODYwYiIgb3BhY2l0eT0iMC45OTgiLz48L2c+PHBhdGggZD0iTTI5LjYyMSAyLjEwMWMtMS40NzkuNTktMy4xNjYuNTU0LTQuMzA0IDIuMTY1LTEuMjE2LjktMi4zOTEgMS45MjQtMy41MDEgMy4wNWwuMzM4LTEuMDU4YzEuOTU0LS4zMzcgMS43ODEtMi41NyAyLjIyLTMuNTMyLTEuOTMxIDEuNTEyLTIuNTM1IDEuNzc0LTIuNTg0IDMuNDY5LS40MTguNzQ4LS40NTEgMS40MzctLjgzMiAyLjAxMWwuMDUyLS4wMzctMS40MjUgMS42NjcuMTExLS45MzVjMS43MTYtLjk5NC43NzktMy4wMjguODU2LTQuMDgyLTEuMjg2IDIuMDg5LTEuNzYyIDIuNTQzLTEuMjIgNC4xNWgtLjAwMWwtLjE5OCAxLjQ1Mi0uNzYyIDEuMDU1LS4wMTIuMDE3LTEuMDI1IDEuNTczLjA2Mi0uMTA1LS4wMDktMS4yNzRjMS45MDYtMS4yMzUuNDgxLTMuMTk1LjQxNi00LjI4Mi0xLjIyOSAyLjI5OS0xLjczMSAyLjgyNC0uODQzIDQuMzk3LS4wMzIuODgyLjAyNSAxLjMwMS0uMDY1IDIuMDA3bC4xMDMtLjE3NS0uOTE1IDEuNzA1LS4xNjItLjg1OGMxLjUzNy0xLjY3My0uMjA1LTMuMTc5LS41NC00LjIxNS0uNzIxIDEuNzg4LS43OTcgMy4zOTIuMzA4IDQuMjkuMDkxLjA5Ny4xNTMuNjE3LjIxMiAxLjE2NC0uNTY5IDEuMTk4LTEuMDUzIDIuNDM0LTEuNDM4IDMuNjk1bC0uMjc2LTEuNTM5YzEuNjA1LTEuODM2LS4yMTMtMy40ODktLjU2My00LjYyNy0uNzU0IDEuOTYzLS44MzMgMy43MjMuMzIxIDQuNzA5LjE0My4xNi4yMiAxLjM3OC4zMTQgMi4xNTJsLjAwMy0uMDA0LS40MjkgMS44NjUtLjMyMi0uNzQ3YzEuMDY5LTIuMTkyLTEuMTE4LTMuMzExLTEuNzUzLTQuMzE4LS4yMTQgMi4wOTIuMTY5IDMuODExIDEuNTQyIDQuNDYxbC40MDIgMS4zODFjLS4xNTIuOTkyLS4yMzkgMS45OTMtLjI1MiAyLjk5N2wtLjQ0OS0xLjAwM2MuMzIzLTEuOTI3LTEuMjEtMy4zNzgtMS45NzgtNC41MTUtLjI1OSAyLjM2Mi45NDggNC4zNDMgMS43NzkgNC45NTYuMTMxLjA4LjM4OC42MjIuNjQ5IDEuMjE0di4wMzRjLjAyNCAxLjEzNC4xNDEgMi4yNjYuMzU3IDMuMzg4bC0uNTc5LS45NjJjLS4xNzItMS45NzMtMS40MzUtMy4yNjItMi4zNDctNC4zNTktLjMwNyAyLjI4IDEuMTI1IDQuMTkzIDIuMTEgNC43ODUuMjE0LjEwNi43MDIgMS4wMyAxLjEwNCAxLjc5Ni4yNjYgMS4wMDkuNjIxIDIuMDA4IDEuMDY5IDIuOTk2bC0xLjExMy0xLjA5NmMtLjU4Ny0xLjg3Ny0yLjIwMS0yLjg0NC0zLjQtMy43MDQuMTM4IDIuMjgzIDIuMDYgMy44MTggMy4yMzUgNC4xNzEuMzAyLjA2NiAxLjI4NiAxLjIxNCAxLjg5NyAxLjg4NHYtLjAwMmwuNjI5IDEuMDY5LTEuMDY2LS42MjdjLTEuMDI2LTEuNjc4LTIuNDE1LTEuNjk2LTQuMDY2LTIuMjQuNTM4LjkwNSAxLjIwNSAyLjY2OCA0LjAxOSAyLjczMy4yMjgtLjAwNy45NTUuNDY1IDEuNjI1LjkxNC40OTQuNzE2IDEuMDQ1IDEuNDIzIDEuNjU5IDIuMTE5bC0xLjE4NC0uNDg4Yy0xLjE2MS0xLjU3NS0yLjU0My0xLjQ3Ni00LjIyOS0xLjg3Ni42MTEuODUxIDEuNDIyIDIuNTQgNC4yMjQgMi4zNjguMjc3LS4wMzIgMS4zNTEuNTc5IDIuMTQzIDEuMDE4bDEuNDkyIDEuNDAyLTEuNDYzLS40MTdjLTEuMzMyLTEuNDMzLTIuNjk0LTEuMTc4LTQuNDE1LTEuMzgzLjcwMy43NzYgMS43MDIgMi4zNjIgNC40NjYgMS44NzIuMy0uMDcgMS42NzguNTM5IDIuNTE1Ljg3OGwuMDE4LS4wMTYgMS4wNzEuODEzLTEuNzI2LS4xODVjLTEuNTU2LTEuMTg2LTIuODU1LS43MDMtNC41ODYtLjYxMy44MjUuNjQ1IDIuMDc3IDIuMDM4IDQuNzE5IDEuMDg3LjI4NC0uMTIgMS43NDUuMjQ2IDIuNjI4LjQzOWwuMDAyLS4wMDJjMS41NCAxLjA0MSAzLjI3IDIuMDQyIDUuMjA1IDIuOTk2bC0uOTU3LS4wNDNjLTEuMzY5LS45OC0yLjMzNS0uMzM5LTMuNjg5LS4wMzMuNzI4LjUzNiAxLjg4MyAxLjc2IDMuODUxLjQ4NS4yMS0uMTU1IDEuMjA4LjA1NCAxLjkyNi4xMzVsLS4wMDQtLjAwNiA0LjY3MyAxLjk0NS42MDUtLjc2OS0yLjY1Mi0uOThjLS41NDQtLjcwNC0xLjM5Ny0xLjYxNS0xLjM2OS0xLjkzNS4wNzUtMi44ODktMS45NDMtMy4zMTctMi45NjktMy43MzcuNTQ1IDEuNjIxLjQ5MiAzLjA0OSAyLjM5MiAzLjg1OWwuOTQ1IDEuNDA3LTMuODc2LTEuNzkxYy0uMzE2LS42MDEtLjYxMi0xLjE4MS0uNTU0LTEuMzk2LjU4Ny0yLjg1LTEuMjU5LTMuNjYxLTIuMTYyLTQuMjc1LjIzIDEuNzExLS4wNzYgMy4xMTcgMS41OTEgNC4yODRsLjQxOCAxLjAxNC0xLjY4LS45NTVjLS4zMzItLjc1OS0uNzM0LTEuNjA4LS42NjQtMS45MDMuNDk4LTIuNzAxLTEuMjIxLTMuNjM2LTEuOTg3LTQuMjE3LjE5NSAxLjYyMi0uMjQyIDMuNDM5IDEuNDIgNC4yODVsLjExNyAxLjE0Mi0yLjE1Ny0xLjUyYy0uMTkxLS44MDgtLjQ2LTEuODk3LS4zMzctMi4xNzUuOTczLTIuNTY5LS41NzMtMy43NDYtMS4yMjItNC40NTYtLjA5OCAxLjYzMS0uNjM4IDMuMTA3LjU1NSA0LjQ0OGwuMDY3IDEuNDMtMS40NjYtMS4zMTEuMTE3LS4wODEtLjM0LS4xNC0uNzQ3LS43NzJjLjAxOS0uNjk1LjA2MS0xLjQwMi4yMDYtMS41ODUgMS41ODYtMi4yNDMuMzg2LTMuNzctLjA2NS00LjYyLS41MDQgMS41NTQtMS4zOTggMi44NDgtLjU4IDQuNDQ2bC0uMjE1IDEuMDI0LTEuMjUtMS42MTRjLjA3Mi0uODI2LjE2MS0xLjk0Mi4zNjQtMi4xNjcgMS43MzItMi4xMzIuNjM2LTMuNzM3LjI0Mi00LjYxNC0uNjA2IDEuNTE3LTEuNTg0IDIuNzQ5LS44NzQgNC4zOThsLS4zOSAxLjM5YTE4Ljk1IDE4Ljk1IDAgMCAxLTEuMTYtMi4xOTljLjI4My0uOTQ3LjgxNi0yLjMzMiAxLjAwNS0yLjUwNCAxLjk4NS0xLjk5NiAxLjA5NS0zLjY3OS44MTMtNC41ODMtLjc5IDEuNDY3LTEuOTE0IDIuNjIzLTEuNDEzIDQuMzJsLS43MzEgMS45OWMtLjUyOS0xLjM0Ny0uODc5LTIuNzE1LTEuMDc1LTQuMDkxLjU4My0xLjA2Ny45ODktMS4zNDYgMS4zNjctMS42ODkgMi4yMjgtLjg2NCAyLjM0My0yLjUyMiAyLjY5LTMuOTc1LTEuMDExIDEuMTc3LTMuMTQ5IDEuODAzLTIuOTQgMy41NzUtLjQ1My40MDUtLjkwMiAxLjAxMS0xLjIgMS40MzVsLS4xMDUtMS42NDYuMDE5LTEuMzI1Yy43MjMtMS40ODEgMS4xODgtMS43ODYgMS42MTktMi4xNzcgMi4yMjgtLjg2NCAyLjM0Mi0yLjUyMyAyLjY4OS0zLjk3Ni0xLjAxMSAxLjE3Ny0zLjE0OSAxLjgwMy0yLjk0IDMuNTc1LS41MTIuNDU4LTEuMDA3IDEuMTU1LTEuMjk1IDEuNTcxbC4wNTItLjUwNS4xMjctLjkwNWEyMy4zNCAyMy4zNCAwIDAgMSAuNjk1LTIuOTkzYzEuMTE4LTEuMjA4IDEuNjUxLTEuMzY2IDIuMTc2LTEuNjE2IDIuMzgzLS4xODUgMi45Ny0xLjc0IDMuNzIxLTMuMDMxLTEuMzA3LjgzNS0zLjUzNS44MTgtMy44NDYgMi41NzYtLjY2Ni4zMTEtMS4zOTIuODkxLTEuNzcgMS4xOTNsLjgtMi4wNmMxLjE4My0xLjE0OSAxLjcyNS0xLjI3OCAyLjI2Mi0xLjUgMi4zODktLjA1NyAzLjA1OS0xLjU3OCAzLjg3OC0yLjgyOC0xLjM1Ljc2NC0zLjU3NC42MjgtMy45NzggMi4zNjYtLjYyNi4yNTMtMS4zMTMuNzI3LTEuNzI5IDEuMDI0LjY5MS0xLjQzMyAxLjUwNi0yLjgxMSAyLjQxNy00LjExMy43ODMtLjM4MiAxLjIwNi0uNDA5IDEuNjM4LS40ODYgMi4zNDcuNDUxIDMuMzI0LS44OTQgNC4zODktMS45NDEtMS40ODEuNDYxLTMuNjI1LS4xNDQtNC4zODkgMS40NjktLjM4Ny4wNjctLjgxNi4yMDYtMS4yMDEuMzVsMS4zNjctMS43MjdjMS4zOTgtLjg3MSAxLjk1NC0uODgzIDIuNTI2LS45ODYgMi4zNDcuNDUxIDMuMzI0LS44OTQgNC4zODktMS45NDEtMS40ODEuNDYxLTMuNjI1LS4xNDQtNC4zODkgMS40NjktLjU4Mi4xLTEuMjU2LjM2MS0xLjczMi41NmEyOS42IDI5LjYgMCAwIDEgNC4xNS0zLjc1YzIuNDM5LjcwMyAyLjY1Mi0xLjczNiAzLjk3OS0yLjYwNHoiIGZpbGw9IiNiODg2MGIiIG9wYWNpdHk9IjAuOTk4Ii8+PGcgZmlsbD0iI2RhYTUyMCI+PHBhdGggZD0iTTI1LjQ2MyA0Ny4yMzRjMi4wMDIgMS4yMjYgMS45Ni4wODggMi45MzUuMTI2LS44MTUtLjEyMy0uODQzLS42MzUtMi45MzUtLjEyNnptLTcuNzY3LTQuMzQzYzIuMzA2IDEuNTI4IDIuNDI2LjM5NiAzLjYzMy41ODctLjk5Ni0uMjUtLjk1My0uNzYxLTMuNjMzLS41ODd6bTExLjcyMy0uMDQxYzIuNTYxIDEuMzE2IDEuMzQ1IDIuMDA1IDIuMDA4IDMuMDA1LS42NDktLjc3OC0xLjIwMi0uNDc5LTIuMDA4LTMuMDA1em0tMy4zODgtMi4wOTdjMi4yMDYgMS43OTcuOTI0IDIuMjQ1IDEuMzc3IDMuMzY0LS40OC0uODk2LTEuMDYxLS43MDUtMS4zNzctMy4zNjR6bS0yLjM4NC0xLjgxM2MxLjg3MSAxLjcwMy45MzcgMi40MjMgMS4zMjEgMy40ODQtLjcxNS0uOTM1LTEuMDUzLS45NjQtMS4zMjEtMy40ODR6bS0yLjMwNC0yLjY3M2MxLjUzNyAyLjAwOS4zOTEgMi4yMzQuNTc5IDMuMzQ2LS4yNDktLjkwOC0uNzY2LS44MTgtLjU3OS0zLjM0NnptLTEuODYtMi41OTZjLjk4MyAyLjMzMS0uMTgyIDIuMjYtLjI3OSAzLjM4NC0uMDEzLS45NDItLjUzNi0uOTg0LjI3OS0zLjM4NHptLTEuNDg3LTIuOTI1Yy44MjYgMi4zOTEtLjMzMiAyLjI0My0uNTAzIDMuMzU4LjA1LS45NC0uNDY5LTEuMDE4LjUwMy0zLjM1OHptLS42OTgtMy41MDJjLjUyNCAyLjQ0Ni0uNjA4IDIuMjEyLS45MTcgMy4zMTEuMTY2LS45MzQtLjM0LTEuMDUuOTE3LTMuMzExek0xNS44OSA0MC4yNzFjMi4wMTMgMS44OTggMi4zMjMuODAyIDMuNDggMS4xOTUtLjkzOS0uNDE1LS44MS0uOTExLTMuNDgtMS4xOTV6bS0yLjAyNi0yLjkwN2MxLjc4NCAyLjExNCAyLjIxNyAxLjA2MSAzLjMyMiAxLjU4My0uODg1LS41MTktLjcwMS0uOTk4LTMuMzIyLTEuNTgzem0tMS45MjgtMy4zNDJjMS42MDMgMi4yNzIgMi4xMjUgMS4yNTIgMy4xODUgMS44NjktLjg0MS0uNTk2LS42MTYtMS4wNi0zLjE4NS0xLjg2OXptLS45MjctMy45NTVjMS4wMDMgMi41OTMgMS45MTUgMi4xMTkgMi43OTMgMi45NzYtLjY3MS0uNzgyLS40OTgtMS41NjctMi43OTMtMi45NzZ6bS4wNDItNC43MTVjLjQwOSAyLjc2NiAxLjMxNSAyLjQ4OCAxLjk0IDMuNTE1LS40NTMtLjkxMS0uMTUtMS42NDgtMS45NC0zLjUxNXptLjExNC00LjI0Yy4zNDUgMi44NjUgMS4xMDkgMi41NzcgMS42MzUgMy42NC0uNDA2LTIuNjEtLjEyNy0xLjcwNy0xLjYzNS0zLjY0em0uODI3LTMuNDgyYy4yODUgMi41MzcuNTYxIDIuNTk5IDEuMjM0IDMuMjgzLjM4OC0xLjcwNi4wNi0xLjc1OC0xLjIzNC0zLjI4M3oiLz48cGF0aCBkPSJNMTEuOTkyIDE3LjYzYy4yODUgMi41MzcuNTYxIDIuNTk5IDEuMjM0IDMuMjgzLjM4OC0xLjcwNi4wNi0xLjc1OC0xLjIzNC0zLjI4M3ptMS42NjgtMy42MTljLS4zODggMi41MjMtLjEzOCAyLjY1NS4zMzIgMy40OTIuODIxLTEuNTQ1LjUxNy0xLjY4Mi0uMzMyLTMuNDkyem0xLjc1Ni0zLjA1MmMtLjM3MiAyLjI5OS0uMTMyIDIuNDE5LjMxOCAzLjE4MS43ODYtMS40MDguNDk1LTEuNTMyLS4zMTgtMy4xODF6bTIuMjQ1LTIuODc0Yy0uOTM1IDIuMTMzLS43MzQgMi4zMDktLjQ4OCAzLjE2IDEuMTEzLTEuMTY2Ljg2My0xLjM1OS40ODgtMy4xNnptMi42OTMtMi42MjRjLTEuMDI1IDEuOTU5LS44OCAyLjE0OS0uNzggMi45OTQgMS4wNTUtMS4wMDkuODczLTEuMjIxLjc4LTIuOTk0em0zLjYxMi0yLjJjLTEuNjQxIDEuNDgxLTEuNTcxIDEuNzEtMS43NzEgMi41MzcgMS4zNC0uNTggMS4yNDItLjg0MiAxLjc3MS0yLjUzN3ptLTguMjggMjMuMjE4YzEuMDUxLS4zMDggMS42NTUtMS4zNjkgMi4xMTEtMi42NzktLjc0Ny43NzEtMS42NzcgMS4wMjYtMi4xMTEgMi42Nzl6bS4xMjUtNC4xNTZjMS4wNTEtLjMwOCAxLjY1NS0xLjM2OSAyLjExMS0yLjY3OS0uNzQ3Ljc3MS0xLjY3NyAxLjAyNi0yLjExMSAyLjY3OXptMS41MDYtNC42NTVjMS4wOTUuMDE0IDEuOTg0LS44MjMgMi44MDUtMS45NDEtLjk0LjUxNy0xLjkwNC40ODgtMi44MDUgMS45NDF6bTEuMjU1LTIuNzY2YzEuMDk1LjAzMSAxLjk5Ni0uNzkyIDIuODM0LTEuODk3LS45NDguNTAzLTEuOTEyLjQ1OS0yLjgzNCAxLjg5N3ptMi4xODgtNC4wODhjMS4wNDQuMzMgMi4xMzctLjIxNCAzLjI0Ni0xLjA0Ny0xLjA1LjIyMy0xLjk2NC0uMDgzLTMuMjQ2IDEuMDQ3em0yLjc0Ny0yLjg1NmMxLjA0NC4zMyAyLjEzNy0uMjE0IDMuMjQ2LTEuMDQ3LTEuMDUuMjIzLTEuOTY0LS4wODMtMy4yNDYgMS4wNDd6bTIuMTUtMy41MzdjMS4zMzIuMzM2IDIuMjcyLS43MDUgMy4wNjUtMS44NDItLjkyNy41NC0xLjg5OS40MzQtMy4wNjUgMS44NDJ6bTM0LjUzIDM1Ljc0NmMuMTA5LjI2OC4zNS41MTguMjY3LjgyOC0uMDc2LjM4OS0uNDAzLjY5NS0uNDA0IDEuMTA0LjE2OC4yNzIuNDU1LjAwMi41OC0uMTY1LjEzNi0uMTY2LjMtLjMxOS40ODEtLjQxOC4yMjctLjMyNS42OTUtLjQ0Mi44MTEtLjg1YTIuMTEgMi4xMSAwIDAgMC0uMzE1LTEuMjg5Yy0uMjUyLS4zMzQtLjgwNS0uNDA5LTEuMS0uMDkxLS4yODcuMTUtLjQ3Ny41NzItLjMyLjg4eiIvPjxwYXRoIGQ9Ik02Mi4zNzQgNDAuMzI0Yy4wMzEuNDE3LS4yNjUuNzU1LS41NDkgMS4wMjItLjE4OC4yMDItLjQ3My4zOC0uNDgyLjY4Ni4wMTYuMzY1LjQ5MS41MTkuNzguMzZsLjYyMi0uNDA2Yy4yNTgtLjE1OC41LS4zOTcuNTI5LS43MTQuMDc2LS4zNTQuMTIzLS43ODMtLjE0NS0xLjA3MS0uMjI1LS4xODEtLjYwMi0uMTIyLS43NTYuMTI0em0xLjU4Ny42NjhjLS4yNy4xNDQtLjQ2Ni40MzUtLjUwMy43MzktLjAyLjI5MS4zMzUuMzUyLjU0NC40MzEuMjM1LjA3NS41ODEuMDUxLjY2Mi0uMjI5LjA3NC0uMjg2LjA2OC0uNjQxLS4xODItLjg0Mi0uMTQyLS4xMjEtLjM0NC0uMTQ5LS41MjEtLjA5OHptLjItNC44MjdjLjIwNC43NDYuNjMyIDEuNDU1LjU2OCAyLjI1NC0uMDQuNDIzLS4xNzcgMS4yNDcuNTIxIDEuMDg4LjQ3Ni4wNTMuOTY4LS40MSAxLjM5Mi0uMDQ2LjQwOC4zNjUuOTU3LjA5MyAxLjQyMy4wMjMuNDkxLS4xMzguODQ1LS42MDguNzY5LTEuMTI2LjAzNy0uNjIyLS44MzItLjQ0Ny0xLjA5LS4xLS4yMzYuMDc1LS44MzguNjkxLS44NjguMjUzLjMyLS4zMzIuNzA4LS43MDEuNjY4LTEuMjA0LS4xMzQtLjM2My0uNjc2LS44NTMtMS4wNS0uNTQ4LS4yNjEuNDEyLS4xNzEuOTctLjU2NSAxLjMyNi0uMTc0LjM3NS0uODEyLjM1Ny0uNDU0LS4xMTguMzU3LS41NDIuNzcyLTEuMjExLjQ4LTEuODc1LjEwMi0uNjEyLS41NDgtLjk0Ny0xLjA3LS43MzUtLjM1NS4xMDktLjY5OC40MzQtLjcyMy44MDl6bTIuNTg5LTUuNTk2Yy0uNTQ3LjYwMi40NDEgMS4wMDEuNjcyIDEuNDYxLjI2My41MDMuMDc2IDEuNTkxLjkxMSAxLjUwNS41OTItLjMxIDEuMjY1LjEyNyAxLjgxOC0uMjQuNDUyLS40NDQuNjI2LTEuMTAyIDEuMDU1LTEuNTgxLjY4My0uNDg0LS4yNDYtMS4yOTUtLjYzOC0uNjAyLS4xMDMuMjk3LS43OTguOTUxLS41ODQuMjEzLjI1Ny0uNTIxLS4wNjctMS4xNjQtLjYyNy0xLjI4NS0uOTI3LS4xMDUtLjA2NiAxLjQwMy0uOTM1IDEuMTk0LS4zMTYtLjQyMy0uMTIxLTEuNDE0LS45OTQtMS4yNzUtLjMwMS4wNTEtLjY2OS4yNjgtLjY3OS42MXptLjUyOS01LjcyYy0uMDExLjY4Mi45NjcuNjU4IDEuMTgxIDEuMjU2Ljk2My4zMDMuNTAyLTEuMTk0LS4wNjYtMS4zOTEtLjMzOC0uMTczLS44NTYtLjE3My0xLjExNS4xMzV6bTIuMzM5LjM0MmMuMjc2Ljc1My0uNjczIDEuMzItLjQ2MyAyLjA1NC4yNS42ODYgMS4zNjQuMjE1IDEuMTEyLS40MzgtLjMyMi0uNTc2LjYwNC0xLjA4LjA1Ni0xLjYtLjM0LS4yMjgtLjQxMy0uMjMyLS43MDUtLjAxNnptMS42NzcuNDczYy0uNDcuMzU0LS4yMTIgMS40MzguMzkuNzU2LjI0Ny0uMjkuMDQzLS44NzktLjM5LS43NTZ6bS0zLjY4NS01Ljc3Yy0uNDMuMDE2LS42MzIuNjAyLS4zODMuOTE3LjM5NC4wNzIuODI5LS4wMDYgMS4xMDIuMzg3LjQ1NC4xMTYuMzktLjU3LjI0LS44MjQtLjE4Ni0uMzA3LS41OTUtLjUzMy0uOTU5LS40OHptMS40NTktLjU4NWMtLjQyMi4yNzQuMDA0LjcyNy4wOCAxLjA2NC0uMDk5LjMyMi4xODguOTguNTEyLjUxNy4xNzMtLjQzNS4xODQtLjk3LS4wNDItMS4zODgtLjExNy0uMjEzLS4zNDQtLjE5LS41NS0uMTkyem0xLjM5OC0uMjI0Yy4wMTMuMzQ0LS4yMTQgMS4yNDguNDE5Ljk5Ny4zNjMtLjIzMy40MTktLjc0OS4zMTEtMS4xMjctLjE3LS4zNDgtLjYyOS0uMTQ3LS43My4xM3ptLTMuOTMyLTMuNjVjLS4zMjcuMDY1LS40NjUuNDQ5LS40MTQuNzQ3LjAyMi4yNjguMjM3LjUzNS41MjMuNTI4LjQwOS4wMzYuODUxLS4xNTIgMS4yMzIuMDY4LjMzLjI4Mi43ODUuNDUgMS4yMTYuMzI5YS45NS45NSAwIDAgMCAuNTkyLS40NWMuMjQtLjI4My42NDMtLjI0Ljk3Ni0uMjY0LjIzMi4wMTcuNDg0LS4wODMuNTM0LS4zMzMuMTA2LS4yNzYuMDk5LS42NjYtLjE3OC0uODM5LS4yMjktLjEzOS0uNTE3LS4wNjItLjcxMS4xMDEtLjE3NS4xMi0uNDE4LjI2NC0uNjIxLjEyMi0uMjctLjI3Ni0uNTM1LS42NC0uOTU1LS42NjQtLjI5OS0uMDMzLS41MTcuMjQ3LS41ODQuNTA5LS4wNTguMjU5LS40MDIuNTE3LS42MTQuMjU3LS4yMi0uMTk1LS41NDYtLjQwMy0uODQxLS4yNDItLjA2MS4wMzItLjEwMy4wODgtLjE1NC4xMzJ6bS0zLjI3Mi0zLjYzOGMtLjI0OS41NjYuNDAzLjk0NS44OTEuOTE0LjU4My0uMTExLjkwMy4zMjEgMS4zMS41OTguNDM1LjA2NSAxLjA2NS4yMDQgMS4zMi0uMjcxLjA4Mi0uNDE3LS41NDEtLjY0NS0uMzMzLTEuMTM2LjE3Mi0uNzkxLS42NjYtMS40NzItMS40MTQtMS4zNDMtLjM2Ni4zNi40OTUuNjcyLjMyNiAxLjE0LjEyLjIyMi0uMDU1IDEuMTY5LS4yMTguNTYyLS4wMzUtLjU5LS41MjItMS4wMTktMS4xMTYtLjkyMS0uMzIzLS4wMDMtLjYzMy4xNTQtLjc2Ni40NTh6bTMuOTUxLTEuMjYxYy4wODUuMTM3LjIyNy4yMjIuMzU4LjMwOS4wNS4wNjQtLjAyMi4xMzYtLjA2OC4xNzktLjEyOC4xMTQtLjMxNi4xNTQtLjQxNS4zMDEtLjA0MS4wODYuMDA1LjE4NS4wNjcuMjQ3LjE1NC4wNzQuMzM5LjAwOS40NTctLjEwMy4xNDYtLjEzNS4yMjMtLjMzNi4yMDgtLjUzNC0uMDA0LS4xODctLjAwNy0uMzg2LS4xMDktLjU1LS4wNTctLjEwMi0uMTY4LS4xNjQtLjI4Mi0uMTc5LS4yNzYtLjA0OS0uMjM2LjEyNS0uMjE2LjMyOXptLTcuMzI5LTQuNzg3Yy0uMDE5LjcgMS4wOTkuNTUzIDEuMTggMS4yNzkuMjg3LjY0MS4wOTYgMS41MzcuNzg3IDEuOTUxLjQ2OC40NTUgMS4xNjIuMjg4IDEuMDAyLS40NS0uMDI1LS42NTMuNDI0LTEuMjQzLjIwMi0xLjkwOC0uMTA1LS41MjgtLjM4MS0xLjI0NC0uOTYyLTEuMzYxLS42OTcuMzk4LjM1OCAxLjMxMy4wNDYgMS44MjctLjQyNy0uNTM4LS42NTItMS40MDUtMS40NjMtMS41MjgtLjI2My0uMDUyLS42MDUtLjAyMi0uNzkxLjE5MXptLTEuMDUxIDEuMTdjLS4yMzcuNjAyLjMyNSAxLjE0MS44MTEgMS4yODguNDA4LjEyNCAxLjQ2Mi4zNTcgMS4xNjktLjUyMS0uMTA0LS43MTYtLjc2OS0xLjIxNy0xLjQ4NS0xLjA3Ny0uMTk5LjAxOC0uNDI3LjEwMy0uNDk1LjMxem0tMy41NTEtMy41MmMtLjI2OC4wMDktLjUzNC4yOS0uNDM0LjU2Mi4xMDcuMjE2LjMwNi40MDMuNTU3LjQyMWwuNjM2LjA3MWMuMzM1LS4wMDUuNjU0LS4zNDMuNTU5LS42ODQtLjA1My0uMjgxLS4zMjQtLjUzNy0uNjIzLS40NzktLjIzNC4wMDMtLjQ4Ni0uMDItLjY5NC4xMDl6bS40NjctMS4zMDNjLjM1Ni4yNDguNTY4LjY0Ljg3Ljk0MS4xNjIuMTMuNDA4LjIzOS42MDEuMTExLjE1My0uMTIyLjA5Ny0uMzQ5IDAtLjQ4Ny0uMTM0LS4yMjgtLjMwNy0uNDQ0LS41NDQtLjU3MS0uMzA2LS4wNDctLjYyNS0uMDc5LS45MjYuMDA2em0xLjU5Ni0uNDA5Yy0uMDI0LjI1MS4wMTguNTYzLjI1Ny43LjIxMi4wNzMuMzI1LS4yNDMuMTY5LS4zNjktLjEwOC0uMTQ4LS4yNzUtLjIzNS0uNDI3LS4zMzF6Ii8+PGNpcmNsZSBjeD0iNDIuMTYzIiBjeT0iNDAuODMzIiByPSI4Ljg4IiBzdHJva2Utd2lkdGg9Ii4zOTYiIHBhaW50LW9yZGVyPSJtYXJrZXJzIGZpbGwgc3Ryb2tlIiBzdHJva2U9IiNiODg2MGIiIG9wYWNpdHk9IjAuOTk1Ii8+PC9nPjxjaXJjbGUgY3g9IjQyLjE2MyIgY3k9IjQwLjgzMyIgcj0iOC4wNTciIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iLjY1IiBwYWludC1vcmRlcj0ibWFya2VycyBmaWxsIHN0cm9rZSIgc3Ryb2tlPSIjYjg4NjBiIiBvcGFjaXR5PSIwLjk5NSIvPjxwYXRoIGQ9Ik00Mi4xNjMgMzMuODQxYy0zLjg1OSAwLTYuOTkxIDMuMTMyLTYuOTkxIDYuOTkxczMuMTMyIDYuOTkyIDYuOTkxIDYuOTkyIDYuOTktMy4xMzMgNi45OS02Ljk5Mi0zLjEzMS02Ljk5MS02Ljk5LTYuOTkxem0tLjQzNSAxLjkwNXY0LjAzNmwtMi44NTUtMi44NTVjLS41OTktLjU5OS0uNTcxLTEuNTU3LjE3NC0xLjk1NGE2LjU5IDYuNTkgMCAwIDEgMS4xNzUtLjQ4N2MuODA4LS4yNDYgMS41MDUuNDEzIDEuNTA1IDEuMjU5em0yLjM3NS0xLjI1OWE2LjU5IDYuNTkgMCAwIDEgMS4xNzUuNDg3Yy43NDYuMzk3Ljc3MyAxLjM1NS4xNzQgMS45NTRsLTIuODU1IDIuODU1di00LjAzNmMwLS44NDcuNjk3LTEuNTA2IDEuNTA1LTEuMjU5em0tNS44NDUgMy4wNTdsMi44NTMgMi44NTNoLTQuMDM0Yy0uODQ3IDAtMS41MDYtLjY5Ny0xLjI1OS0xLjUwNWE2LjU5IDYuNTkgMCAwIDEgLjQ4Ni0xLjE3NGMuMzk3LS43NDYgMS4zNTUtLjc3MyAxLjk1NC0uMTc0em05Ljc2NC4xNzRhNi41OSA2LjU5IDAgMCAxIC40ODYgMS4xNzRjLjI0Ni44MDgtLjQxMyAxLjUwNS0xLjI1OSAxLjUwNWgtNC4wMzRsMi44NTMtMi44NTNjLjU5OS0uNTk5IDEuNTU3LS41NzEgMS45NTQuMTc0em0tMTAuOTQ1IDMuNTUxaDQuMDM0bC0yLjg1MyAyLjg1M2MtLjU5OS41OTktMS41NTcuNTcxLTEuOTU0LS4xNzQtLjE5OC0uMzcyLS4zNjEtLjc2NC0uNDg2LTEuMTczLS4yNDctLjgwOC40MTItMS41MDUgMS4yNTktMS41MDV6bTYuMTM4IDBoNC4wMzRjLjg0NyAwIDEuNTA2LjY5NyAxLjI1OSAxLjUwNS0uMTI1LjQxLS4yODguODAyLS40ODYgMS4xNzQtLjM5Ny43NDYtMS4zNTUuNzczLTEuOTU0LjE3NHptLTEuMDUyLjE4bDMuMjkgMy4yODljLjE4Mi4xODIuMjM2LjQ1NS4xMzguNjkycy0uMzMuMzkyLS41ODcuMzkyaC01LjY4MWMtLjI1NyAwLS40ODgtLjE1NS0uNTg3LS4zOTJzLS4wNDQtLjUxLjEzOC0uNjkyeiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgZmlsbCBzdHJva2UiIGZpbGw9IiNiODg2MGIiIG9wYWNpdHk9IjAuOTk1Ii8+PGcgc3Ryb2tlPSIjYjg4NjBiIiBmaWxsPSIjZGFhNTIwIj48Y2lyY2xlIGN4PSI0Mi4xNjMiIGN5PSI0MC44MzMiIHI9IjIuODczIiBzdHJva2Utd2lkdGg9Ii4yMzIiIHBhaW50LW9yZGVyPSJtYXJrZXJzIGZpbGwgc3Ryb2tlIiBvcGFjaXR5PSIwLjk5NSIvPjxjaXJjbGUgY3g9IjQyLjE2MyIgY3k9IjQwLjgzMyIgcj0iMi40MDciIHN0cm9rZS13aWR0aD0iLjE5NCIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgZmlsbCBzdHJva2UiIG9wYWNpdHk9IjAuOTk1Ii8+PC9nPjxjaXJjbGUgY3g9IjQyLjE2MyIgY3k9IjQwLjgzMyIgcj0iMS4yODMiIHBhaW50LW9yZGVyPSJtYXJrZXJzIGZpbGwgc3Ryb2tlIiBmaWxsPSIjYjg4NjBiIiBvcGFjaXR5PSIwLjk5NSIvPjxwYXRoIGQ9Ik0zOC4xMTggMzIuOTI3bC4zNzUuNzMzbS4xOTctMS4wMDFsLjMyMi43NTdtLjIxNy0uOTY1bC4yNzIuNzc3bS4yNjctLjk0N2wuMjIyLjc5M202LjIxOC0uMTQ3bC0uMzc1LjczM20tLjE5Ny0xLjAwMWwtLjMyMi43NTdtLS4yMTctLjk2NWwtLjI3Mi43NzdtLS4yNjctLjk0N2wtLjIyMi43OTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2I4ODYwYiIgc3Ryb2tlLXdpZHRoPSIwLjI2NSIvPjxkZWZzID48cGF0aCBpZD0iQiIgZD0iTTg5LjI5MiAxMzUuMjM0bC0uMTU2LS45NjUtNi45OTIgMS4wMDMtNS4xMDMtNC40NDEtMy4xMTgtNy43NDktMS45MzcgNy4wNCAxLjMwOSAyLjg5NSA4LjU2NiA0LjkwMSA3LjQzMi0yLjY4NCIvPjxwYXRoIGlkPSJDIiBkPSJNODkuMTM1IDEzNC4yNjlsLjAzMy0xLjIyOS02LjQ1OC0uMjI1LTQuNDg4LTYuNDI2Ljc1Ni0xMC43NzItMy40OTYgNC41MzYtLjc2OSA0Ljg5MSAyLjMyOSA1Ljc4NiA1LjEwMyA0LjQ0MXoiLz48cGF0aCBpZD0iRCIgZD0iTTg5LjE2OSAxMzMuMDQxaDBsLjE3Ny0uODU1LTUuMDAxLTEuNjM0LTMuNjQyLTUuMTc4IDMuMDc0LTE0Ljc2Ny00Ljg5MyA2LjM1Ni0uNjYyIDkuNDI4IDQuNDg4IDYuNDI2eiIvPjxwYXRoIGlkPSJFIiBkPSJNODkuMzQ1IDEzMi4xODVsLjUtMS4yODktMy4yOTYtMS41MTQtMi43NzMtNi42NDggNC4zMS0xNS4yMDEtNC44NjUgNS43NDItMi41MTggMTIuMDk4IDMuNjQyIDUuMTc4eiIvPjxwYXRoIGlkPSJGIiBkPSJNODkuODQ2IDEzMC44OTZsLjY3My0xLjE1MS0xLjQzLTEuNjMzLTEuNzcxLTcuMDQ5IDUuMzc5LTE0Ljc2Ny01LjY2OSA0Ljk3MS0zLjI1MSAxMS40NjYgMi43NzMgNi42NDh6Ii8+PC9kZWZzPjwvc3ZnPg==");
    background-size: auto 88%;
    background-repeat: no-repeat;
    background-position: right 6px center;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 1) 90%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 1) 90%);
    pointer-events: none;
    z-index: 1;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-pjka .tt-inner-body::before {
    opacity: 0.25;
}
.custom-tooltip.tt-theme-pjka .tt-body-grid {
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-pjka .tt-speed-col {
    border-left: none !important;
    background: transparent !important;
}

/* 2. Perumka RnB Theme (Signal Red, Running Sill White, Deep Navy) */
.custom-tooltip.tt-theme-rnb,
body.dark-mode .custom-tooltip.tt-theme-rnb,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb {
    background: #a81c1c !important;
    border-color: #881337 !important;
}
.tt-header-rnb {
    position: relative;
    background-color: #a81c1c;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20295%20300%22%20width%3D%22295%22%20height%3D%22300%22%3E%3Cpolygon%20points%3D%22128%2C0%20196%2C0%20352%2C300%20284%2C300%22%20fill%3D%22%231a3674%22%2F%3E%3Cpolygon%20points%3D%22196%2C0%20295%2C0%20295%2C300%20352%2C300%22%20fill%3D%22%23a81c1c%22%2F%3E%3C%2Fsvg%3E");
    background-size: 295px 300px;
    background-position: left 0px;
    background-repeat: no-repeat;
    border-bottom: 2.5px solid #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    min-height: 25px;
}
.tt-header-rnb-left {
    padding: 5px 8px 5px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 5;
}
.tt-rnb-pill {
    background: rgba(0, 0, 0, 0.35);
    color: #fecaca;
    padding: 0.5px 4.5px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
}
.tt-special-stripe.stripe-rnb {
    background: linear-gradient(to bottom, #a81c1c 0%, #a81c1c 50%, #1a3674 50%, #1a3674 100%) !important;
}

/* 2A. Compact Body (Tanpa Foto) - 100% Sambung Lurus Tanpa Garis Putih */
.custom-tooltip.tt-theme-rnb .tt-inner-body,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-inner-body,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-inner-body {
    position: relative;
    overflow: hidden;
    background-color: #a81c1c !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20295%20300%22%20width%3D%22295%22%20height%3D%22300%22%3E%3Cpolygon%20points%3D%22128%2C0%20196%2C0%20352%2C300%20284%2C300%22%20fill%3D%22%231a3674%22%2F%3E%3Cpolygon%20points%3D%22196%2C0%20295%2C0%20295%2C300%20352%2C300%22%20fill%3D%22%23a81c1c%22%2F%3E%3C%2Fsvg%3E") !important;
    background-size: 295px 300px !important;
    background-position: left -26px !important;
    background-repeat: no-repeat !important;
}

/* 2B. Photo Mode (Dengan Foto) - Sinkron Trayektori Melintasi Foto 125px */
.custom-tooltip.tt-theme-rnb:has(.tt-header-photo-wrapper) .tt-header-rnb,
.custom-tooltip.tt-theme-rnb:has(.tt-header-slider-wrapper) .tt-header-rnb,
.custom-tooltip.tt-theme-rnb.tt-has-photo .tt-header-rnb {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20295%20300%22%20width%3D%22295%22%20height%3D%22300%22%3E%3Cpolygon%20points%3D%22106%2C0%20174%2C0%20330%2C300%20262%2C300%22%20fill%3D%22%231a3674%22%2F%3E%3Cpolygon%20points%3D%22174%2C0%20295%2C0%20295%2C300%20330%2C300%22%20fill%3D%22%23a81c1c%22%2F%3E%3C%2Fsvg%3E");
    background-size: 295px 300px;
    background-position: left 0px;
}
.custom-tooltip.tt-theme-rnb:has(.tt-header-photo-wrapper) .tt-inner-body,
.custom-tooltip.tt-theme-rnb:has(.tt-header-slider-wrapper) .tt-inner-body,
.custom-tooltip.tt-theme-rnb.tt-has-photo .tt-inner-body,
body.dark-mode .custom-tooltip.tt-theme-rnb:has(.tt-header-photo-wrapper) .tt-inner-body,
body.dark-mode .custom-tooltip.tt-theme-rnb:has(.tt-header-slider-wrapper) .tt-inner-body,
body.dark-mode .custom-tooltip.tt-theme-rnb.tt-has-photo .tt-inner-body,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb:has(.tt-header-photo-wrapper) .tt-inner-body,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb:has(.tt-header-slider-wrapper) .tt-inner-body,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb.tt-has-photo .tt-inner-body {
    background-color: #a81c1c !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20295%20300%22%20width%3D%22295%22%20height%3D%22300%22%3E%3Cpolygon%20points%3D%22106%2C0%20174%2C0%20330%2C300%20262%2C300%22%20fill%3D%22%231a3674%22%2F%3E%3Cpolygon%20points%3D%22174%2C0%20295%2C0%20295%2C300%20330%2C300%22%20fill%3D%22%23a81c1c%22%2F%3E%3C%2Fsvg%3E") !important;
    background-size: 295px 300px !important;
    background-position: left -151px !important;
    background-repeat: no-repeat !important;
}
.custom-tooltip.tt-theme-rnb .tt-body-grid {
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-rnb .tt-speed-col {
    border-left: none !important;
    background: transparent !important;
}
.custom-tooltip.tt-theme-rnb .tt-speed-huge,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-speed-huge,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-speed-huge {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-rnb .tt-speed-unit-label,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-speed-unit-label,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-speed-unit-label {
    color: #fee2e2 !important;
    position: relative;
    z-index: 2;
}

/* Typography on Perumka RnB Red Body (High-contrast pure white / bright light grey) */
.custom-tooltip.tt-theme-rnb .tt-title,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-title,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-title,
.tt-theme-rnb .tt-title,
body.dark-mode .tt-theme-rnb .tt-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.custom-tooltip.tt-theme-rnb .tt-loco-row,
.custom-tooltip.tt-theme-rnb .tt-loco-code,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-loco-row,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-loco-row,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-loco-code,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-loco-code {
    color: #f1f5f9 !important; /* abu terang */
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.custom-tooltip.tt-theme-rnb .tt-loco-svg,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-loco-svg,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-loco-svg,
.tt-theme-rnb .tt-loco-svg,
body.dark-mode .tt-theme-rnb .tt-loco-svg {
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.custom-tooltip.tt-theme-rnb .tt-subtitle,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-subtitle,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-subtitle {
    color: #f8fafc !important; /* putih / abu terang */
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 0.95;
}

.custom-tooltip.tt-theme-rnb .tt-status,
body.dark-mode .custom-tooltip.tt-theme-rnb .tt-status,
body:not(.dark-mode) .custom-tooltip.tt-theme-rnb .tt-status {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 3. WnB Theme (Locomotive White Body with Dual Blue Wave Stripes) */
.custom-tooltip.tt-theme-wnb {
    border-color: #1a3674 !important;
}
body.dark-mode .custom-tooltip.tt-theme-wnb {
    background: #0f172a !important;
    border-color: #38bdf8 !important;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-wnb {
    background: #ffffff !important;
    border-color: #1a3674 !important;
}
.tt-header-wnb {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tt-header-wnb-top {
    padding: 5px 10px 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tt-header-wnb-left {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #1a3674;
    font-size: 11px;
    font-weight: 800;
}
.tt-wnb-pill {
    background: rgba(2, 132, 199, 0.15);
    color: #0284c7;
    padding: 0.5px 4.5px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
}
.tt-wnb-stripes-bar {
    height: 6px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #ffffff;
}
.tt-wnb-stripe-dark { height: 2.5px; background: #1a3674; width: 100%; }
.tt-wnb-stripe-light { height: 2.5px; background: #0284c7; width: 100%; }
.tt-special-stripe.stripe-wnb {
    background: linear-gradient(to bottom, #1a3674 0%, #1a3674 48%, #ffffff 48%, #ffffff 52%, #0284c7 52%, #0284c7 100%) !important;
}
.tt-theme-wnb .tt-title {
    color: #0284c7 !important;
}
body.dark-mode .tt-theme-wnb .tt-title {
    color: #38bdf8 !important;
}

/* WnB 1991-2011 KAI "Z" Logo Watermark across Body behind Speed */
.custom-tooltip.tt-theme-wnb .tt-inner-body {
    position: relative;
    overflow: hidden;
}
.custom-tooltip.tt-theme-wnb .tt-inner-body::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 95px;
    height: 65px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMTUgMTczIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xMjQpIj4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOiNlZjdkMDA7IiBkPSJtIDExNC4zMDg1OSw4MDguNDU4OTggYyA0MC43Nzc1Myw3Mi40OTczOSAxMTcuNDQ0NTMsMTE3LjQwOTA5IDIwMC42MjMwNSwxMTcuNTI1NCBsIDMyNy4zMTAwNywtMS4yZS00IC0zOS44OTM0MywxMDkuNjA2MzQgSCAzMS42Mzk2MTcgWiIgdHJhbnNmb3JtPSJzY2FsZSgwLjI2NDU4MzMzKSIgLz4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOiNlZjdkMDA7IiBkPSJtIDE5Mi4wOTQwMiwxODQuMDk1MjQgYyAtMTAuNzg5MDYsLTE5LjE4MTYgLTMxLjA3Mzg3LC0zMS4wNjQ0OCAtNTMuMDgxNTIsLTMxLjA5NTI2IGwgLTg2LjYwMDc5LDNlLTUgTCA2Mi45NjY4NSwxMjQgaCAxNTEgeiIgLz4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOiNlZjdkMDA7IiBkPSJNIDQxLjEyODYzNSwxODQgSCAxOTIuMTI4NjMgbCAtMTAuOTE5MSwzMCBIIDMwLjIwOTUyOSBaIiAvPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4xOTc4OTk4LDAsLTAuMjkyOTI1NiwwLjgxMDUxOTUyLDEwNC42Mjk1Myw4LjE4NTI5NTgpIiBzdHlsZT0iZmlsbDojZWY3ZDAwOyI+CiAgICAgIDxwYXRoIGQ9Ik0gLTAuMTcwNTg3NTMsMzM0LjEyNDg0IEggNC44Njk4NzY5IHYgMTAuNDQ2OSBoIDAuMDgzMTc2IGwgNC43NTc2NjYyLC0xMC40NDY5IGggNS4yODk5OTE5IGwgLTUuMTU2OTEwNCwxMS4zNDUyIDQuOTQwNjUzNCwxMC44NjI3OCBIIDkuMjQ0OTMzNiBsIC00LjI5MTg4MDcsLTkuMjMyNTMgaCAtMC4wODMxNzYgdiA5LjIzMjUzIGggLTUuMDQwNDY0NDMgeiIgLz4KICAgICAgPHBhdGggZD0ibSAxOC44MDY4NDMsMzM0LjEyNDg0IGggMTAuMTk3Mzc1IHYgNC43MjQzOSBoIC01LjE1NjkxMSB2IDQuMDkyMjYgaCA0LjQ3NDg2OCB2IDQuNjA3OTUgaCAtNC40NzQ4NjggdiA0LjA0MjM1IGggNS4xOTAxODIgdiA0Ljc0MTAzIEggMTguODA2ODQzIFoiIC8+CiAgICAgIDxwYXRoIGQ9Im0gMzQuMzI0MTU2LDMzNC4xMjQ4NCBoIDUuODcyMjI0IHEgMy41NTk5MzIsMCA1LjYyMjY5NiwxLjgyOTg3IDIuMDYyNzY1LDEuODI5ODcgMi4wNjI3NjUsNC45NzM5MiAwLDEuNjEzNjIgLTAuNzgxODU0LDMuMTI3NDIgLTAuNzgxODU1LDEuNDk3MTcgLTIuMjc5MDIyLDIuMjYyMzkgbCA0LjAyNTcxNywxMC4wMTQzOCBoIC01LjMyMzI2MyBsIC00LjA3NTYyMywtMTAuMTE0MTkgaCAtMC4wODMxOCB2IDEwLjExNDE5IGggLTUuMDQwNDY0IHogbSA1LjA0MDQ2NCw0LjI5MTg4IHYgNS4yNzMzNiBxIDMuMzQzNjc1LC0wLjA2NjYgMy4zNDM2NzUsLTIuMzQ1NTcgMCwtMS41NDcwNyAtMC43ODE4NTQsLTIuMjEyNDggLTAuNzY1MjIsLTAuNjY1NDEgLTIuNTYxODIxLC0wLjcxNTMxIHoiIC8+CiAgICAgIDxwYXRoIGQ9Im0gNTIuOTY4ODgyLDMzNC4xMjQ4NCBoIDEwLjE5NzM3NSB2IDQuNzI0MzkgaCAtNS4xNTY5MTEgdiA0LjA5MjI2IGggNC40NzQ4NjggdiA0LjYwNzk1IGggLTQuNDc0ODY4IHYgNC4wNDIzNSBoIDUuMTkwMTgxIHYgNC43NDEwMyBIIDUyLjk2ODg4MiBaIiAvPgogICAgICA8cGF0aCBkPSJtIDY2LjgyMjY3NywzMzQuMTI0ODQgaCAxMi4wMjcyNDcgdiA1LjA3MzczIGggLTMuNDc2NzU2IHYgMTcuMTM0MjUgaCAtNS4xMDcwMDUgdiAtMTcuMTM0MjUgaCAtMy40NDM0ODYgeiIgLz4KICAgICAgPHBhdGggZD0ibSA5OC4yNDMyMzUsMzU2LjMzMjgyIGggLTUuMjQwMDg3IGwgLTAuODQ4Mzk1LC0zLjcwOTY0IEggODYuODMxNDkgbCAtMC44ODE2NjUsMy43MDk2NCBoIC01LjE0MDI3NiBsIDUuODg4ODU5LC0yMi4yMDc5OCBoIDUuNjU1OTY3IHogbSAtNy4wNTMzMjQsLTcuNzAyMDkgcSAtMS4xMzExOTMsLTQuOTU3MjkgLTEuNjk2NzksLTkuNDMyMTYgaCAtMC4wNjY1NCBxIC0wLjU5ODg2OCw0LjYwNzk1IC0xLjY4MDE1NSw5LjQzMjE2IHoiIC8+CiAgICAgIDxwYXRoIGQ9Im0gMTAyLjExNTksMzM0LjEyNDg0IGggNi4yMzgyIHEgMy4yOTM3NywwIDUuMjg5OTksMS44Nzk3NyAxLjk5NjIzLDEuODc5NzggMS45OTYyMyw0Ljk1NzI5IDAsMy4yNDM4NyAtMi4wMjk1LDUuMDkwMzcgLTIuMDEyODUsMS44Mjk4NyAtNS41ODk0MiwxLjgyOTg3IGggLTAuODY1MDMgdiA4LjQ1MDY4IGggLTUuMDQwNDcgeiBtIDUuMDQwNDcsNC4yNTg2MSB2IDUuMjQwMDggcSAxLjY5Njc5LC0wLjAzMzMgMi40OTUyOCwtMC42NDg3NyAwLjgxNTEyLC0wLjYxNTUgMC44MTUxMiwtMS45NDYzMiAwLC0xLjQzMDYyIC0wLjc4MTg1LC0yLjAxMjg1IC0wLjc4MTg2LC0wLjU5ODg3IC0yLjUyODU1LC0wLjYzMjE0IHoiIC8+CiAgICAgIDxwYXRoIGQ9Im0gMTIwLjk0MzYyLDMzNC4xMjQ4NCBoIDUuMDQwNDcgdiAyMi4yMDc5OCBoIC01LjA0MDQ3IHoiIC8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
body.dark-mode .custom-tooltip.tt-theme-wnb .tt-inner-body::before {
    opacity: 0.16;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-wnb .tt-inner-body::before {
    opacity: 0.13;
}
.custom-tooltip.tt-theme-wnb .tt-body-grid {
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-wnb .tt-speed-col {
    border-left: none !important;
    background: transparent !important;
}

/* 4. The Nusantara Explorer Theme (Obsidian Jet Black & Metallic Gold with Batik Kawung) */
.custom-tooltip.tt-theme-nusantara {
    border-color: #c5a059 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 10px rgba(197, 160, 89, 0.25) !important;
}
body.dark-mode .custom-tooltip.tt-theme-nusantara {
    background: rgba(16, 17, 20, 0.96) !important;
    border-color: #c5a059 !important;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-nusantara {
    background: rgba(24, 25, 29, 0.96) !important;
    border-color: #c5a059 !important;
    color: #f4f4f5 !important;
}
.tt-header-nusantara {
    position: relative;
    background-color: #0b0c10;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIiBzdHJva2U9IiNjNWEwNTkiIHN0cm9rZS13aWR0aD0iMS4yIiBmaWxsPSJub25lIj48ZyBmaWxsPSIjYzVhMDU5IiBmaWxsLW9wYWNpdHk9IjAuMSI+PGVsbGlwc2UgY3g9IjIwIiBjeT0iMjAiIHJ4PSIxNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIyMCIgY3k9IjIwIiByeD0iNS41IiByeT0iMTQiLz48ZWxsaXBzZSBjeD0iMCIgY3k9IjAiIHJ4PSIxNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIwIiBjeT0iMCIgcng9IjUuNSIgcnk9IjE0Ii8+PGVsbGlwc2UgY3g9IjQwIiBjeT0iMCIgcng9IjE0IiByeT0iNS41Ii8+PGVsbGlwc2UgY3g9IjQwIiBjeT0iMCIgcng9IjUuNSIgcnk9IjE0Ii8+PGVsbGlwc2UgY3g9IjAiIGN5PSI0MCIgcng9IjE0IiByeT0iNS41Ii8+PGVsbGlwc2UgY3g9IjAiIGN5PSI0MCIgcng9IjUuNSIgcnk9IjE0Ii8+PGVsbGlwc2UgY3g9IjQwIiBjeT0iNDAiIHJ4PSIxNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSI0MCIgY3k9IjQwIiByeD0iNS41IiByeT0iMTQiLz48L2c+PGcgZmlsbD0iI2M1YTA1OSIgc3Ryb2tlPSJub25lIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjExLjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjguNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjIwIiByPSIxLjMiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMjAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjIuMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMTEuNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iMCIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSIxMS41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMCIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMCIgY3k9IjQwIiByPSIyLjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMjguNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjQwIiByPSIxLjMiLz48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIyLjIiLz48Y2lyY2xlIGN4PSI0MCIgY3k9IjI4LjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI4LjUiIGN5PSI0MCIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIwIiByPSIxLjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMjAiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iMjAiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iNDAiIHI9IjEuMiIvPjwvZz48ZyBzdHJva2U9IiNjNWEwNTkiIHN0cm9rZS13aWR0aD0iMC44IiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI0LjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iNC4yIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSIwIiByPSI0LjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iNDAiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjQuMiIvPjwvZz48ZyBzdHJva2U9IiNjNWEwNTkiIHN0cm9rZS13aWR0aD0iMS4yIiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjAiIHI9IjMuMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSIyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSI0MCIgcj0iMy4yIi8+PC9nPjwvc3ZnPg==");
    background-size: 32px 32px;
    background-position: center;
    border-bottom: 2px solid #c5a059;
    padding: 5px 10px 5px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.tt-header-nusantara::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 12, 16, 0.95) 0%, rgba(11, 12, 16, 0.75) 45%, rgba(11, 12, 16, 0.1) 65%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.tt-header-nusantara-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.tt-nusantara-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #f1dfa8;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.tt-nusantara-sub {
    font-size: 8.5px;
    font-weight: 700;
    color: #c5a059;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.tt-header-nusantara-right {
    position: relative;
    z-index: 2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #f1dfa8;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid #c5a059;
    padding: 1.5px 6px;
    border-radius: 3px;
}
.tt-special-stripe.stripe-nusantara {
    background: linear-gradient(to right, #c5a059 0%, #c5a059 35%, #000000 35%, #000000 65%, #c5a059 65%, #c5a059 100%) !important;
}
.tt-theme-nusantara .tt-title {
    color: #f1dfa8 !important;
}
body:not(.dark-mode) .tt-theme-nusantara .tt-subtitle {
    color: #cbd5e1 !important;
}
body:not(.dark-mode) .tt-theme-nusantara .tt-status {
    color: #f1dfa8 !important;
}

/* Nusantara Explorer Body Batik Kawung Watermark (Edge-to-Edge, Seamless) */
.custom-tooltip.tt-theme-nusantara .tt-inner-body {
    position: relative;
    overflow: hidden;
}
.custom-tooltip.tt-theme-nusantara .tt-inner-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIiBzdHJva2U9IiNjNWEwNTkiIHN0cm9rZS13aWR0aD0iMS4yIiBmaWxsPSJub25lIj48ZyBmaWxsPSIjYzVhMDU5IiBmaWxsLW9wYWNpdHk9IjAuMSI+PGVsbGlwc2UgY3g9IjIwIiBjeT0iMjAiIHJ4PSIxNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIyMCIgY3k9IjIwIiByeD0iNS41IiByeT0iMTQiLz48ZWxsaXBzZSBjeD0iMCIgY3k9IjAiIHJ4PSIxNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSIwIiBjeT0iMCIgcng9IjUuNSIgcnk9IjE0Ii8+PGVsbGlwc2UgY3g9IjQwIiBjeT0iMCIgcng9IjE0IiByeT0iNS41Ii8+PGVsbGlwc2UgY3g9IjQwIiBjeT0iMCIgcng9IjUuNSIgcnk9IjE0Ii8+PGVsbGlwc2UgY3g9IjAiIGN5PSI0MCIgcng9IjE0IiByeT0iNS41Ii8+PGVsbGlwc2UgY3g9IjAiIGN5PSI0MCIgcng9IjUuNSIgcnk9IjE0Ii8+PGVsbGlwc2UgY3g9IjQwIiBjeT0iNDAiIHJ4PSIxNCIgcnk9IjUuNSIvPjxlbGxpcHNlIGN4PSI0MCIgY3k9IjQwIiByeD0iNS41IiByeT0iMTQiLz48L2c+PGcgZmlsbD0iI2M1YTA1OSIgc3Ryb2tlPSJub25lIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjExLjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjguNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjIwIiByPSIxLjMiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMjAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjIuMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMTEuNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iMCIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSIxMS41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMCIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMCIgY3k9IjQwIiByPSIyLjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMjguNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjQwIiByPSIxLjMiLz48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIyLjIiLz48Y2lyY2xlIGN4PSI0MCIgY3k9IjI4LjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI4LjUiIGN5PSI0MCIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIwIiByPSIxLjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMjAiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iMjAiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iNDAiIHI9IjEuMiIvPjwvZz48ZyBzdHJva2U9IiNjNWEwNTkiIHN0cm9rZS13aWR0aD0iMC44IiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI0LjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iNC4yIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSIwIiByPSI0LjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iNDAiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjQuMiIvPjwvZz48ZyBzdHJva2U9IiNjNWEwNTkiIHN0cm9rZS13aWR0aD0iMS4yIiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjAiIHI9IjMuMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSIyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSI0MCIgcj0iMy4yIi8+PC9nPjwvc3ZnPg==");
    background-size: 28px 28px;
    background-position: right center;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 25%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 25%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
    z-index: 1;
}
.custom-tooltip.tt-theme-nusantara .tt-body-grid {
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-nusantara .tt-speed-col {
    border-left: none !important;
    background: transparent !important;
}
.custom-tooltip.tt-theme-nusantara .tt-speed-huge,
.custom-tooltip.tt-theme-nusantara .tt-speed-unit-label {
    position: relative;
    z-index: 2;
}

/* 5. Adaptive Special Livery (2 / 3 Colors Generated from DB Hex) */
.custom-tooltip.tt-theme-adaptive {
    border-color: var(--special-c1, #f59e0b) !important;
}
body.dark-mode .custom-tooltip.tt-theme-adaptive {
    background: rgba(21, 26, 36, 0.94) !important;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-adaptive {
    background: rgba(255, 255, 255, 0.96) !important;
}
.tt-header-adaptive {
    background: #0f172a;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tt-header-adaptive-top {
    padding: 5px 10px 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tt-header-adaptive-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #ffffff;
}
.tt-adaptive-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.tt-header-adaptive-right {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 1px 5px;
    border-radius: 3px;
}
.tt-adaptive-stripe-bar {
    height: 3.5px;
    width: 100%;
}
.tt-adaptive-stripe-bar.adaptive-pulse-1 {
    background: var(--special-c1, #f59e0b);
}
.tt-adaptive-stripe-bar.adaptive-pulse-2 {
    background: linear-gradient(to right,
        var(--special-c1, #f59e0b) 0%, var(--special-c1, #f59e0b) 50%,
        var(--special-c2, #ffffff) 50%, var(--special-c2, #ffffff) 100%);
}
.tt-adaptive-stripe-bar.adaptive-pulse-3 {
    background: linear-gradient(to right,
        var(--special-c1, #f59e0b) 0%, var(--special-c1, #f59e0b) 33.3%,
        var(--special-c2, #ffffff) 33.3%, var(--special-c2, #ffffff) 66.6%,
        var(--special-c3, #3b82f6) 66.6%, var(--special-c3, #3b82f6) 100%);
}

/* User Distance Chip in Tooltips */
.tt-distance-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    margin: 3px 0 2px 0;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
    width: fit-content;
}
body.dark-mode .tt-distance-chip {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}
.tt-theme-pjka .tt-distance-chip {
    background: rgba(28, 82, 48, 0.12);
    color: #1c5230;
    border-color: rgba(28, 82, 48, 0.25);
}
body.dark-mode .tt-theme-pjka .tt-distance-chip {
    background: rgba(40, 107, 67, 0.25);
    color: #a7f3d0;
    border-color: rgba(40, 107, 67, 0.5);
}
.tt-theme-nusantara .tt-distance-chip {
    background: rgba(197, 160, 89, 0.2);
    color: #f1dfa8;
    border-color: rgba(197, 160, 89, 0.5);
}
.tt-distance-chip.tt-dist-pending {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.25);
    cursor: pointer;
}
body.dark-mode .tt-distance-chip.tt-dist-pending {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}

/* Tooltip Loco Row */
.tt-loco-row {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 5px;
    margin: 0;
    width: auto;
}
.tt-loco-row .tt-loco {
    margin: 0 !important;
    flex: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-loco-empty {
    display: none;
}
/* --- Tooltip 2-Column Body Layout with Huge Speed & Indonesian Loco SVG --- */
.tt-body-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.tt-info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-info-col .tt-title {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.25;
    color: var(--blue, #38bdf8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 1px 0;
    position: relative;
    max-width: 100%;
}
.tt-info-col .tt-title.tt-title-marquee {
    overflow: hidden;
    text-overflow: clip;
}
.tt-info-col .tt-title.tt-title-marquee .tt-title-scroll {
    display: inline-block;
    white-space: nowrap;
    padding-left: 0;
    animation: alu-tt-marquee 10s linear infinite;
}
.tt-info-col .tt-title.tt-title-marquee:hover .tt-title-scroll {
    animation-play-state: paused;
}
@keyframes alu-tt-marquee {
    0% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(0);
    }
    85% {
        transform: translateX(calc(-100% + 180px));
    }
    100% {
        transform: translateX(0);
    }
}
.tt-info-col .tt-loco-row {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-sub, #94a3b8);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    width: auto;
}
.tt-info-col .tt-loco-svg {
    flex-shrink: 0;
    color: var(--text-sub, #94a3b8);
}
.tt-info-col .tt-loco-code {
    letter-spacing: 0.2px;
}
.tt-info-col .tt-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-sub, #94a3b8);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.tt-info-col .tt-status {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main, #e2e8f0);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Speed Huge Column (3 lines high, no box, dynamic number on top, unit below) */
.tt-speed-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    flex-shrink: 0;
    min-width: 55px;
    padding-left: 8px;
    border-left: none !important;
}
.tt-speed-huge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 30px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -1px;
    color: #059669;
}
body.dark-mode .tt-speed-huge {
    color: #34d399;
}
.tt-speed-unit-label {
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    color: var(--text-sub, #64748b);
    margin-top: 2px;
}
body.dark-mode .tt-speed-unit-label {
    color: #94a3b8;
}

/* --- Full-width Bottom Footer Strip for "Jarak dari Anda" (No Box) --- */
.tt-footer-strip {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1.3;
    transition: all 0.2s ease;
}
.tt-footer-strip i {
    font-size: 11px;
    flex-shrink: 0;
}
.tt-footer-strip.tt-footer-pending {
    cursor: pointer;
}
.tt-footer-strip.tt-footer-pending:hover {
    filter: brightness(1.1);
}

/* Default Theme: Inverted solid block according to Dark / Light mode */
/* Light Mode: Solid dark block with white text */
body:not(.dark-mode) .tt-footer-strip {
    background: #0f172a;
    color: #f8fafc;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
body:not(.dark-mode) .tt-footer-strip i {
    color: #ef4444;
}

/* Dark Mode: Solid white block with dark text */
body.dark-mode .tt-footer-strip {
    background: #ffffff;
    color: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
body.dark-mode .tt-footer-strip i {
    color: #ef4444;
}

/* --- Livery Theme Accents for Speed Huge & Footer Strip --- */

/* 1. PJKA VINTAGE */
.tt-theme-pjka .tt-speed-huge { color: #1c5230; }
body.dark-mode .tt-theme-pjka .tt-speed-huge { color: #6ee7b7; }
body:not(.dark-mode) .tt-theme-pjka .tt-footer-strip {
    background: #143d22;
    color: #f5e7b2;
    border-top: 1.5px solid #1c5230;
}
body.dark-mode .tt-theme-pjka .tt-footer-strip {
    background: #f5e7b2;
    color: #143d22;
    border-top: 1.5px solid #286b43;
}
.tt-theme-pjka .tt-loco-svg { color: #1c5230; }
body.dark-mode .tt-theme-pjka .tt-loco-svg { color: #6ee7b7; }

/* 2. PERUMKA (RnB) */
.tt-theme-rnb .tt-speed-huge,
body.dark-mode .tt-theme-rnb .tt-speed-huge { color: #ffffff !important; }
.tt-theme-rnb .tt-footer-strip,
body:not(.dark-mode) .tt-theme-rnb .tt-footer-strip,
body.dark-mode .tt-theme-rnb .tt-footer-strip {
    background: #1a3674 !important;
    color: #ffffff !important;
    border-top: 2px solid #881337 !important;
}
.tt-theme-rnb .tt-loco-svg,
body.dark-mode .tt-theme-rnb .tt-loco-svg { color: #ffffff !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }

/* 3. WHITE & BLUE (WnB) */
.tt-theme-wnb .tt-speed-huge { color: #0284c7; }
body.dark-mode .tt-theme-wnb .tt-speed-huge { color: #38bdf8; }
body:not(.dark-mode) .tt-theme-wnb .tt-footer-strip {
    background: #0f172a;
    color: #ffffff;
    border-top: 2px solid #0284c7;
}
body.dark-mode .tt-theme-wnb .tt-footer-strip {
    background: #ffffff;
    color: #0f172a;
    border-top: 2px solid #38bdf8;
}
.tt-theme-wnb .tt-loco-svg { color: #0284c7; }
body.dark-mode .tt-theme-wnb .tt-loco-svg { color: #38bdf8; }

/* 4. THE NUSANTARA EXPLORER */
.tt-theme-nusantara .tt-speed-huge { color: #c5a059; }
body.dark-mode .tt-theme-nusantara .tt-speed-huge { color: #f1dfa8; }
body:not(.dark-mode) .tt-theme-nusantara .tt-footer-strip {
    background: #111215;
    color: #f1dfa8;
    border-top: 1.5px solid #c5a059;
}
body.dark-mode .tt-theme-nusantara .tt-footer-strip {
    background: #c5a059;
    color: #101114;
    border-top: 1.5px solid #f1dfa8;
}
.tt-theme-nusantara .tt-loco-svg { color: #c5a059; }
body.dark-mode .tt-theme-nusantara .tt-loco-svg { color: #f1dfa8; }

/* 5. ADAPTIVE HEX THEME */
.tt-theme-adaptive .tt-speed-huge { color: var(--adapt-c1, #059669); }
body.dark-mode .tt-theme-adaptive .tt-speed-huge { color: var(--adapt-c1, #34d399); }
body:not(.dark-mode) .tt-theme-adaptive .tt-footer-strip {
    background: #0f172a;
    color: #ffffff;
    border-top: 1.5px solid var(--adapt-c1, #38bdf8);
}
body.dark-mode .tt-theme-adaptive .tt-footer-strip {
    background: #ffffff;
    color: #0f172a;
    border-top: 1.5px solid var(--adapt-c1, #38bdf8);
}
.tt-theme-adaptive .tt-loco-svg { color: var(--adapt-c1, #0284c7); }

/* 6. HUT 81 Special Livery Theme (Semakin Melayani with Dynamic Hex & Body Watermark) */
.custom-tooltip.tt-theme-hut81 {
    border-color: var(--hut81-c1, #eab308) !important;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 {
    background: #12151b !important;
    border-color: var(--hut81-c1, #eab308) !important;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-hut81 {
    background: #ffffff !important;
    border-color: var(--hut81-c1, #eab308) !important;
}

.tt-header-hut81 {
    background: var(--hut81-c1, #eab308);
    color: #0f172a;
    border-bottom: 2px solid #ffffff;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
}
.tt-header-hut81-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: #0f172a;
}
.tt-hut81-pill {
    padding: 1.5px 5px;
    background: #0f172a;
    color: var(--hut81-c1, #fde047);
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.4px;
}
.tt-header-hut81-slogan {
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.4px;
}

/* Left Accent Stripe */
.tt-special-stripe.stripe-hut81 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4.5px;
    background: var(--hut81-stripe, var(--hut81-c1, #eab308)) !important;
    z-index: 20;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.custom-tooltip.tt-theme-hut81 .tt-inner-body {
    position: relative;
    overflow: hidden;
}

/* Dark Mode: Crisp White Watermark (opacity 0.22) scaled to 60% */
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-inner-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNDAgMTgwIiB3aWR0aD0iMzQwIiBoZWlnaHQ9IjE4MCI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjQsMTYgQzQ0LDE2IDI4LDMwIDI4LDUwIEMyOCw2NCAzOCw3NSA1MCw4MiBDMzQsOTAgMjAsMTA2IDIwLDEyOCBDMjAsMTU0IDQwLDE3MiA2NiwxNzIgQzk0LDE3MiAxMTQsMTUxIDExNCwxMjYgQzExNCwxMDQgOTksODggODQsODEgQzk1LDczIDEwMyw2MyAxMDMsNDkgQzEwMywyOSA4NiwxNiA2NCwxNiBaIE02NCwzMiBDNzQsMzIgODIsMzkgODIsNDkgQzgyLDU5IDczLDY3IDYzLDY3IEM1Myw2NyA0NSw1OSA0NSw0OSBDNDUsMzkgNTMsMzIgNjQsMzIgWiBNNjYsOTYgQzgwLDk2IDkyLDEwNyA5MiwxMjUgQzkyLDE0MyA3OCwxNTYgNjUsMTU2IEM1MCwxNTYgMzgsMTQzIDM4LDEyNSBDMzgsMTA3IDUwLDk2IDY2LDk2IFoiLz48cGF0aCBkPSJNMTI0LDQyIEwxNDYsMTYgQzE1MiwxNCAxNTgsMTQgMTYzLDE0IEwxNjUsMTQgTDEzOCwxNzIgTDExMiwxNzIgTDEzNiwzOCBMMTI2LDQ1IFoiLz48cGF0aCBkPSJNMTY0LDI4IEwxODQsMjggTDE4NCwzMyBMMTc2LDMzIEwxNzYsNTAgTDE3MSw1MCBMMTcxLDMzIEwxNjQsMzMgWiBNMTg4LDI4IEwxOTMsMjggTDE5MywzNyBMMjAxLDM3IEwyMDEsMjggTDIwNiwyOCBMMjA2LDUwIEwyMDEsNTAgTDIwMSw0MiBMMTkzLDQyIEwxOTMsNTAgTDE4OCw1MCBaIi8+PHRleHQgeD0iMTcwIiB5PSI4OCIgZm9udC1mYW1pbHk9IidBcmlhbCBCbGFjaycsIC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iMjciIGZvbnQtc3R5bGU9Iml0YWxpYyIgbGV0dGVyLXNwYWNpbmc9IjEiPlNFTUFLSU48L3RleHQ+PHRleHQgeD0iMTcwIiB5PSIxMjAiIGZvbnQtZmFtaWx5PSInQXJpYWwgQmxhY2snLCAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjI3IiBmb250LXN0eWxlPSJpdGFsaWMiIGxldHRlci1zcGFjaW5nPSIxIj5NRUxBWUFOSTwvdGV4dD48cGF0aCBvcGFjaXR5PSIwLjgiIGQ9Ik0xMCwxNjggQzM1LDE1OCA1NSwxNzQgODAsMTY1IEM5NSwxNjAgMTEwLDE2OCAxMjUsMTYyIEMxNDAsMTU2IDE1NSwxNjggMTc1LDE2MCBDMjA1LDE0OCAyMjUsMTcwIDI1NSwxNTggQzI4MCwxNDggMzAwLDE2NiAzMzAsMTU1IEMzMTAsMTcyIDI4NSwxNjIgMjYwLDE3MCBDMjM1LDE3OCAyMTUsMTY0IDE4NSwxNzQgQzE2MCwxODIgMTQ1LDE2OCAxMjAsMTc2IEM5NSwxODQgNzUsMTcwIDUwLDE3OCBDMzAsMTg0IDE1LDE3NCAxMCwxNjggWiIvPjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTQ1LDE1NSBDNjAsMTQyIDgwLDE1OCA5NSwxNDggQzEwNSwxNDIgMTE1LDE1MiAxMjUsMTQ1IEMxMTUsMTU1IDEwMCwxNTAgOTAsMTU4IEM4MCwxNjYgNjUsMTUyIDQ1LDE1NSBaIi8+PHBhdGggb3BhY2l0eT0iMC41IiBkPSJNMjIwLDE1MCBDMjM1LDEzOCAyNTUsMTUyIDI3MCwxNDIgQzI2MCwxNTAgMjQ1LDE0NiAyMzUsMTU0IEMyMjgsMTYwIDIxNSwxNDggMjIwLDE1MCBaIi8+PC9nPjwvc3ZnPg==");
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right 8px center;
    opacity: 0.22;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    pointer-events: none;
    z-index: 1;
}

/* Light Mode: Soft Faint Dark Watermark (opacity 0.15) scaled to 60% */
body:not(.dark-mode) .custom-tooltip.tt-theme-hut81 .tt-inner-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNDAgMTgwIiB3aWR0aD0iMzQwIiBoZWlnaHQ9IjE4MCI+PGcgZmlsbD0iIzBmMTcyYSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNjQsMTYgQzQ0LDE2IDI4LDMwIDI4LDUwIEMyOCw2NCAzOCw3NSA1MCw4MiBDMzQsOTAgMjAsMTA2IDIwLDEyOCBDMjAsMTU0IDQwLDE3MiA2NiwxNzIgQzk0LDE3MiAxMTQsMTUxIDExNCwxMjYgQzExNCwxMDQgOTksODggODQsODEgQzk1LDczIDEwMyw2MyAxMDMsNDkgQzEwMywyOSA4NiwxNiA2NCwxNiBaIE02NCwzMiBDNzQsMzIgODIsMzkgODIsNDkgQzgyLDU5IDczLDY3IDYzLDY3IEM1Myw2NyA0NSw1OSA0NSw0OSBDNDUsMzkgNTMsMzIgNjQsMzIgWiBNNjYsOTYgQzgwLDk2IDkyLDEwNyA5MiwxMjUgQzkyLDE0MyA3OCwxNTYgNjUsMTU2IEM1MCwxNTYgMzgsMTQzIDM4LDEyNSBDMzgsMTA3IDUwLDk2IDY2LDk2IFoiLz48cGF0aCBkPSJNMTI0LDQyIEwxNDYsMTYgQzE1MiwxNCAxNTgsMTQgMTYzLDE0IEwxNjUsMTQgTDEzOCwxNzIgTDExMiwxNzIgTDEzNiwzOCBMMTI2LDQ1IFoiLz48cGF0aCBkPSJNMTY0LDI4IEwxODQsMjggTDE4NCwzMyBMMTc2LDMzIEwxNzYsNTAgTDE3MSw1MCBMMTcxLDMzIEwxNjQsMzMgWiBNMTg4LDI4IEwxOTMsMjggTDE5MywzNyBMMjAxLDM3IEwyMDEsMjggTDIwNiwyOCBMMjA2LDUwIEwyMDEsNTAgTDIwMSw0MiBMMTkzLDQyIEwxOTMsNTAgTDE4OCw1MCBaIi8+PHRleHQgeD0iMTcwIiB5PSI4OCIgZm9udC1mYW1pbHk9IidBcmlhbCBCbGFjaycsIC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iMjciIGZvbnQtc3R5bGU9Iml0YWxpYyIgbGV0dGVyLXNwYWNpbmc9IjEiPlNFTUFLSU48L3RleHQ+PHRleHQgeD0iMTcwIiB5PSIxMjAiIGZvbnQtZmFtaWx5PSInQXJpYWwgQmxhY2snLCAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjI3IiBmb250LXN0eWxlPSJpdGFsaWMiIGxldHRlci1zcGFjaW5nPSIxIj5NRUxBWUFOSTwvdGV4dD48cGF0aCBvcGFjaXR5PSIwLjgiIGQ9Ik0xMCwxNjggQzM1LDE1OCA1NSwxNzQgODAsMTY1IEM5NSwxNjAgMTEwLDE2OCAxMjUsMTYyIEMxNDAsMTU2IDE1NSwxNjggMTc1LDE2MCBDMjA1LDE0OCAyMjUsMTcwIDI1NSwxNTggQzI4MCwxNDggMzAwLDE2NiAzMzAsMTU1IEMzMTAsMTcyIDI4NSwxNjIgMjYwLDE3MCBDMjM1LDE3OCAyMTUsMTY0IDE4NSwxNzQgQzE2MCwxODIgMTQ1LDE2OCAxMjAsMTc2IEM5NSwxODQgNzUsMTcwIDUwLDE3OCBDMzAsMTg0IDE1LDE3NCAxMCwxNjggWiIvPjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTQ1LDE1NSBDNjAsMTQyIDgwLDE1OCA5NSwxNDggQzEwNSwxNDIgMTE1LDE1MiAxMjUsMTQ1IEMxMTUsMTU1IDEwMCwxNTAgOTAsMTU4IEM4MCwxNjYgNjUsMTUyIDQ1LDE1NSBaIi8+PHBhdGggb3BhY2l0eT0iMC41IiBkPSJNMjIwLDE1MCBDMjM1LDEzOCAyNTUsMTUyIDI3MCwxNDIgQzI2MCwxNTAgMjQ1LDE0NiAyMzUsMTU0IEMyMjgsMTYwIDIxNSwxNDggMjIwLDE1MCBaIi8+PC9nPjwvc3ZnPg==");
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: right 8px center;
    opacity: 0.15;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    pointer-events: none;
    z-index: 1;
}

.custom-tooltip.tt-theme-hut81 .tt-body-grid {
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-hut81 .tt-speed-col {
    border-left: none !important;
    background: transparent !important;
}
.custom-tooltip.tt-theme-hut81 .tt-title {
    color: var(--hut81-c1, #b45309) !important;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-title {
    color: var(--hut81-c1, #fde047) !important;
}
.custom-tooltip.tt-theme-hut81 .tt-status {
    color: var(--hut81-c1, #b45309) !important;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-status {
    color: var(--hut81-c1, #fde047) !important;
}
.custom-tooltip.tt-theme-hut81 .tt-speed-huge {
    color: #0f172a !important;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-speed-huge {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.custom-tooltip.tt-theme-hut81 .tt-speed-unit-label {
    color: #334155 !important;
    font-weight: 700 !important;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-speed-unit-label {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
}
.custom-tooltip.tt-theme-hut81 .tt-subtitle {
    color: #334155 !important;
    font-weight: 600;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-subtitle {
    color: #cbd5e1 !important;
    font-weight: 600;
}
.custom-tooltip.tt-theme-hut81 .tt-loco-svg {
    color: var(--hut81-c1, #eab308) !important;
}
body.dark-mode .custom-tooltip.tt-theme-hut81 .tt-loco-svg {
    color: var(--hut81-c1, #fde047) !important;
}

.custom-tooltip.tt-theme-hut81 .tt-footer-strip {
    background: var(--hut81-c1, #eab308) !important;
    color: #0f172a !important;
    border-top: 1.5px solid #ffffff !important;
}


/* =========================================================================
   7. LEGACY OF MURIA ("One Name, Endless Journey") - CC 206 13 65
   ========================================================================= */
.custom-tooltip.tt-theme-muria {
    border-color: var(--muria-c1, #86198f) !important;
}
body.dark-mode .custom-tooltip.tt-theme-muria {
    background: #12151b !important;
    border-color: var(--muria-c1, #86198f) !important;
    box-shadow: 0 10px 25px -5px rgba(134, 25, 143, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
}
body:not(.dark-mode) .custom-tooltip.tt-theme-muria {
    background: #ffffff !important;
    border-color: var(--muria-c1, #86198f) !important;
    box-shadow: 0 10px 25px -5px rgba(134, 25, 143, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.tt-header-muria {
    position: relative;
    background: linear-gradient(135deg, #701a75 0%, var(--muria-c1, #86198f) 60%, #4a044e 100%);
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.tt-header-muria::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 38px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTgwIiB3aWR0aD0iMzYwIiBoZWlnaHQ9IjE4MCI+CiAgPGcgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDwhLS0gR3JvdW5kbGluZSAtLT4KICAgIDxyZWN0IHg9IjIwIiB5PSIxNjYiIHdpZHRoPSIzMjAiIGhlaWdodD0iMyIgcng9IjEuNSIvPgoKICAgIDwhLS0gTWFpbiAyLXN0b3J5IGJ1aWxkaW5nIGJsb2NrIC0tPgogICAgPHJlY3QgeD0iNzUiIHk9IjcyIiB3aWR0aD0iMjEwIiBoZWlnaHQ9Ijk0IiByeD0iMiIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8IS0tIEZsb29yIGRpdmlkZXIgY29ybmljZSAtLT4KICAgIDxyZWN0IHg9IjczIiB5PSIxMTgiIHdpZHRoPSIyMTQiIGhlaWdodD0iMyIgcng9IjEiLz4KCiAgICA8IS0tIExlZnQgRHV0Y2ggVG93ZXIgLS0+CiAgICA8cmVjdCB4PSI0MiIgeT0iNTIiIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMTQiIHJ4PSIyIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMzgsNTIgODQsNTIgODEsNDUgNDEsNDUiLz4KICAgIDwhLS0gRG9tZSAvIEN1cG9sYSAtLT4KICAgIDxwYXRoIGQ9Ik00Myw0NSBDNDMsMjYgNTEsMTQgNjEsOCBDNzEsMTQgNzksMjYgNzksNDUgWiIvPgogICAgPGxpbmUgeDE9IjYxIiB5MT0iOCIgeDI9IjYxIiB5Mj0iMiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSI2MSIgY3k9IjIiIHI9IjIiLz4KCiAgICA8IS0tIFJpZ2h0IER1dGNoIFRvd2VyIC0tPgogICAgPHJlY3QgeD0iMjgwIiB5PSI1MiIgd2lkdGg9IjM4IiBoZWlnaHQ9IjExNCIgcng9IjIiIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyNzYsNTIgMzIyLDUyIDMxOSw0NSAyNzksNDUiLz4KICAgIDwhLS0gRG9tZSAvIEN1cG9sYSAtLT4KICAgIDxwYXRoIGQ9Ik0yODEsNDUgQzI4MSwyNiAyODksMTQgMjk5LDggQzMwOSwxNCAzMTcsMjYgMzE3LDQ1IFoiLz4KICAgIDxsaW5lIHgxPSIyOTkiIHkxPSI4IiB4Mj0iMjk5IiB5Mj0iMiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSIyOTkiIGN5PSIyIiByPSIyIi8+CgogICAgPCEtLSBDZW50cmFsIEZyb250aXNwaWVjZSAvIER1dGNoIEdhYmxlIHdpdGggQXJjaGVkIFN0YWluZWQgR2xhc3MgLS0+CiAgICA8cGF0aCBkPSJNMTUwLDcyIEwxNTAsNTYgUTE1MCwzOCAxODAsMzMgUTIxMCwzOCAyMTAsNTYgTDIxMCw3MiBaIi8+CiAgICA8cG9seWdvbiBwb2ludHM9IjE0NCw3MiAyMTYsNzIgMTgwLDQyIiBmaWxsLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwhLS0gTGFyZ2UgQ2VudHJhbCBSb3NlIC8gQXJjaGVkIFN0YWluZWQgV2luZG93IC0tPgogICAgPGNpcmNsZSBjeD0iMTgwIiBjeT0iNTQiIHI9IjExIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGxpbmUgeDE9IjE3MiIgeTE9IjU0IiB4Mj0iMTg4IiB5Mj0iNTQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICAgIDxsaW5lIHgxPSIxODAiIHkxPSI0NiIgeDI9IjE4MCIgeTI9IjYyIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgICA8Y2lyY2xlIGN4PSIxODAiIGN5PSI1NCIgcj0iNSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KCiAgICA8IS0tIE1haW4gUm9vZiBoaXBzIC0tPgogICAgPHBvbHlnb24gcG9pbnRzPSI4MCw3MiAxNTAsNzIgMTUwLDYyIDgwLDY4IiBmaWxsLW9wYWNpdHk9IjAuMiIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyODAsNzIgMjEwLDcyIDIxMCw2MiAyODAsNjgiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CgogICAgPCEtLSBMZWZ0IFdpbmcgVXBwZXIgRmxvb3IgQXJjaGVzIChUaGUgVGhvdXNhbmQgRG9vcnMgLyBXaW5kb3dzKSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg2LCA4MikiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIyOCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNTYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgPC9nPgogICAgPCEtLSBMZWZ0IFdpbmcgTG93ZXIgRmxvb3IgQXJjaGVzIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODYsIDEyOCkiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIyOCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNTYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgPC9nPgoKICAgIDwhLS0gUmlnaHQgV2luZyBVcHBlciBGbG9vciBBcmNoZXMgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYsIDgyKSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIxNCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjI4IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNDIiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSI1NiIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICA8L2c+CiAgICA8IS0tIFJpZ2h0IFdpbmcgTG93ZXIgRmxvb3IgQXJjaGVzIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE2LCAxMjgpIj4KICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjE0IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMjgiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgICA8cmVjdCB4PSI0MiIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjU2IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgIDwvZz4KCiAgICA8IS0tIENlbnRlciBVcHBlciBQb3J0aWNvIFdpbmRvd3MgLS0+CiAgICA8cmVjdCB4PSIxNjAiIHk9IjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iMjYiIHJ4PSI1Ii8+CiAgICA8cmVjdCB4PSIxNzUiIHk9Ijc2IiB3aWR0aD0iMTAiIGhlaWdodD0iMzAiIHJ4PSI1Ii8+CiAgICA8cmVjdCB4PSIxOTAiIHk9IjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iMjYiIHJ4PSI1Ii8+CgogICAgPCEtLSBDZW50ZXIgR3JhbmQgRW50cmFuY2UgQXJjaHdheSAtLT4KICAgIDxwYXRoIGQ9Ik0xNjYsMTY2IEwxNjYsMTMyIFExNjYsMTIyIDE4MCwxMjIgUTE5NCwxMjIgMTk0LDEzMiBMMTk0LDE2NiBaIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogICAgPHJlY3QgeD0iMTcyIiB5PSIxMzYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIzMCIgcng9IjgiLz4KCiAgICA8IS0tIExlZnQgVG93ZXIgV2luZG93cyAtLT4KICAgIDxyZWN0IHg9IjUwIiB5PSI2MCIgd2lkdGg9IjgiIGhlaWdodD0iMTYiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSI2NCIgeT0iNjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjE2IiByeD0iNCIvPgogICAgPHJlY3QgeD0iNTAiIHk9Ijg4IiB3aWR0aD0iOCIgaGVpZ2h0PSIyMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjY0IiB5PSI4OCIgd2lkdGg9IjgiIGhlaWdodD0iMjAiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSI1MCIgeT0iMTI4IiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjY0IiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgoKICAgIDwhLS0gUmlnaHQgVG93ZXIgV2luZG93cyAtLT4KICAgIDxyZWN0IHg9IjI4OCIgeT0iNjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjE2IiByeD0iNCIvPgogICAgPHJlY3QgeD0iMzAyIiB5PSI2MCIgd2lkdGg9IjgiIGhlaWdodD0iMTYiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSIyODgiIHk9Ijg4IiB3aWR0aD0iOCIgaGVpZ2h0PSIyMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjMwMiIgeT0iODgiIHdpZHRoPSI4IiBoZWlnaHQ9IjIwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMjg4IiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMzAyIiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgoKICAgIDwhLS0gTW91bnRhaW4gTXVyaWEgZmFpbnQgcGVha3MgYmVoaW5kIGJ1aWxkaW5nIC0tPgogICAgPHBhdGggZD0iTTE1LDE2NiBMNjUsOTUgTDExNSwxNDUgTDE4MCw2OCBMMjQ1LDE0NSBMMjk1LDk1IEwzNDUsMTY2IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1kYXNoYXJyYXk9IjMsMyIgb3BhY2l0eT0iMC40Ii8+CgogICAgPCEtLSBUeXBvZ3JhcGh5OiBbIExFR0FDWSBPRiBNVVJJQSBdICYgT05FIE5BTUUsIEVORExFU1MgSk9VUk5FWSAtLT4KICAgIDx0ZXh0IHg9IjE4MCIgeT0iMjEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSInU2Vnb2UgVUknLCBSb2JvdG8sICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjE0IiBsZXR0ZXItc3BhY2luZz0iMy44IiBmaWxsPSIjZmZmZmZmIj5bIExFR0FDWSBPRiBNVVJJQSBdPC90ZXh0PgogICAgPHRleHQgeD0iMTgwIiB5PSIzMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IidTZWdvZSBVSScsIFJvYm90bywgJ0hlbHZldGljYSBOZXVlJywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI4MDAiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZm9udC1zaXplPSI4IiBsZXR0ZXItc3BhY2luZz0iMiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC45Ij5PTkUgTkFNRSwgRU5ETEVTUyBKT1VSTkVZPC90ZXh0PgogIDwvZz4KPC9zdmc+");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    opacity: 0.22;
    pointer-events: none;
}
.tt-header-muria-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: #ffffff;
    position: relative;
    z-index: 10;
}
.tt-muria-pill {
    padding: 1.5px 5px;
    background: #ffffff;
    color: #701a75;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tt-muria-title {
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #ffffff;
}
.tt-header-muria-right {
    position: relative;
    z-index: 10;
}
.tt-header-muria-slogan {
    font-size: 9px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #f5d0fe;
    text-transform: uppercase;
}

/* Left Accent Stripe */
.tt-special-stripe.stripe-muria {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4.5px;
    background: var(--muria-stripe, linear-gradient(to bottom, #86198f 0%, #86198f 50%, #ffffff 50%, #ffffff 100%)) !important;
    z-index: 20;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.custom-tooltip.tt-theme-muria .tt-inner-body {
    position: relative;
    overflow: hidden;
}

/* Dark Mode: Crisp White Watermark (opacity 0.22) scaled to 65% with Lawang Sewu Facade */
body.dark-mode .custom-tooltip.tt-theme-muria .tt-inner-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTgwIiB3aWR0aD0iMzYwIiBoZWlnaHQ9IjE4MCI+CiAgPGcgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDwhLS0gR3JvdW5kbGluZSAtLT4KICAgIDxyZWN0IHg9IjIwIiB5PSIxNjYiIHdpZHRoPSIzMjAiIGhlaWdodD0iMyIgcng9IjEuNSIvPgoKICAgIDwhLS0gTWFpbiAyLXN0b3J5IGJ1aWxkaW5nIGJsb2NrIC0tPgogICAgPHJlY3QgeD0iNzUiIHk9IjcyIiB3aWR0aD0iMjEwIiBoZWlnaHQ9Ijk0IiByeD0iMiIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8IS0tIEZsb29yIGRpdmlkZXIgY29ybmljZSAtLT4KICAgIDxyZWN0IHg9IjczIiB5PSIxMTgiIHdpZHRoPSIyMTQiIGhlaWdodD0iMyIgcng9IjEiLz4KCiAgICA8IS0tIExlZnQgRHV0Y2ggVG93ZXIgLS0+CiAgICA8cmVjdCB4PSI0MiIgeT0iNTIiIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMTQiIHJ4PSIyIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMzgsNTIgODQsNTIgODEsNDUgNDEsNDUiLz4KICAgIDwhLS0gRG9tZSAvIEN1cG9sYSAtLT4KICAgIDxwYXRoIGQ9Ik00Myw0NSBDNDMsMjYgNTEsMTQgNjEsOCBDNzEsMTQgNzksMjYgNzksNDUgWiIvPgogICAgPGxpbmUgeDE9IjYxIiB5MT0iOCIgeDI9IjYxIiB5Mj0iMiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSI2MSIgY3k9IjIiIHI9IjIiLz4KCiAgICA8IS0tIFJpZ2h0IER1dGNoIFRvd2VyIC0tPgogICAgPHJlY3QgeD0iMjgwIiB5PSI1MiIgd2lkdGg9IjM4IiBoZWlnaHQ9IjExNCIgcng9IjIiIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyNzYsNTIgMzIyLDUyIDMxOSw0NSAyNzksNDUiLz4KICAgIDwhLS0gRG9tZSAvIEN1cG9sYSAtLT4KICAgIDxwYXRoIGQ9Ik0yODEsNDUgQzI4MSwyNiAyODksMTQgMjk5LDggQzMwOSwxNCAzMTcsMjYgMzE3LDQ1IFoiLz4KICAgIDxsaW5lIHgxPSIyOTkiIHkxPSI4IiB4Mj0iMjk5IiB5Mj0iMiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSIyOTkiIGN5PSIyIiByPSIyIi8+CgogICAgPCEtLSBDZW50cmFsIEZyb250aXNwaWVjZSAvIER1dGNoIEdhYmxlIHdpdGggQXJjaGVkIFN0YWluZWQgR2xhc3MgLS0+CiAgICA8cGF0aCBkPSJNMTUwLDcyIEwxNTAsNTYgUTE1MCwzOCAxODAsMzMgUTIxMCwzOCAyMTAsNTYgTDIxMCw3MiBaIi8+CiAgICA8cG9seWdvbiBwb2ludHM9IjE0NCw3MiAyMTYsNzIgMTgwLDQyIiBmaWxsLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwhLS0gTGFyZ2UgQ2VudHJhbCBSb3NlIC8gQXJjaGVkIFN0YWluZWQgV2luZG93IC0tPgogICAgPGNpcmNsZSBjeD0iMTgwIiBjeT0iNTQiIHI9IjExIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGxpbmUgeDE9IjE3MiIgeTE9IjU0IiB4Mj0iMTg4IiB5Mj0iNTQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICAgIDxsaW5lIHgxPSIxODAiIHkxPSI0NiIgeDI9IjE4MCIgeTI9IjYyIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgICA8Y2lyY2xlIGN4PSIxODAiIGN5PSI1NCIgcj0iNSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KCiAgICA8IS0tIE1haW4gUm9vZiBoaXBzIC0tPgogICAgPHBvbHlnb24gcG9pbnRzPSI4MCw3MiAxNTAsNzIgMTUwLDYyIDgwLDY4IiBmaWxsLW9wYWNpdHk9IjAuMiIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyODAsNzIgMjEwLDcyIDIxMCw2MiAyODAsNjgiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CgogICAgPCEtLSBMZWZ0IFdpbmcgVXBwZXIgRmxvb3IgQXJjaGVzIChUaGUgVGhvdXNhbmQgRG9vcnMgLyBXaW5kb3dzKSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg2LCA4MikiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIyOCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNTYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgPC9nPgogICAgPCEtLSBMZWZ0IFdpbmcgTG93ZXIgRmxvb3IgQXJjaGVzIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODYsIDEyOCkiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIyOCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNTYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgPC9nPgoKICAgIDwhLS0gUmlnaHQgV2luZyBVcHBlciBGbG9vciBBcmNoZXMgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYsIDgyKSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIxNCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjI4IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNDIiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSI1NiIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICA8L2c+CiAgICA8IS0tIFJpZ2h0IFdpbmcgTG93ZXIgRmxvb3IgQXJjaGVzIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE2LCAxMjgpIj4KICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjE0IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMjgiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgICA8cmVjdCB4PSI0MiIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjU2IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgIDwvZz4KCiAgICA8IS0tIENlbnRlciBVcHBlciBQb3J0aWNvIFdpbmRvd3MgLS0+CiAgICA8cmVjdCB4PSIxNjAiIHk9IjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iMjYiIHJ4PSI1Ii8+CiAgICA8cmVjdCB4PSIxNzUiIHk9Ijc2IiB3aWR0aD0iMTAiIGhlaWdodD0iMzAiIHJ4PSI1Ii8+CiAgICA8cmVjdCB4PSIxOTAiIHk9IjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iMjYiIHJ4PSI1Ii8+CgogICAgPCEtLSBDZW50ZXIgR3JhbmQgRW50cmFuY2UgQXJjaHdheSAtLT4KICAgIDxwYXRoIGQ9Ik0xNjYsMTY2IEwxNjYsMTMyIFExNjYsMTIyIDE4MCwxMjIgUTE5NCwxMjIgMTk0LDEzMiBMMTk0LDE2NiBaIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogICAgPHJlY3QgeD0iMTcyIiB5PSIxMzYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIzMCIgcng9IjgiLz4KCiAgICA8IS0tIExlZnQgVG93ZXIgV2luZG93cyAtLT4KICAgIDxyZWN0IHg9IjUwIiB5PSI2MCIgd2lkdGg9IjgiIGhlaWdodD0iMTYiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSI2NCIgeT0iNjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjE2IiByeD0iNCIvPgogICAgPHJlY3QgeD0iNTAiIHk9Ijg4IiB3aWR0aD0iOCIgaGVpZ2h0PSIyMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjY0IiB5PSI4OCIgd2lkdGg9IjgiIGhlaWdodD0iMjAiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSI1MCIgeT0iMTI4IiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjY0IiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgoKICAgIDwhLS0gUmlnaHQgVG93ZXIgV2luZG93cyAtLT4KICAgIDxyZWN0IHg9IjI4OCIgeT0iNjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjE2IiByeD0iNCIvPgogICAgPHJlY3QgeD0iMzAyIiB5PSI2MCIgd2lkdGg9IjgiIGhlaWdodD0iMTYiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSIyODgiIHk9Ijg4IiB3aWR0aD0iOCIgaGVpZ2h0PSIyMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjMwMiIgeT0iODgiIHdpZHRoPSI4IiBoZWlnaHQ9IjIwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMjg4IiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMzAyIiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgoKICAgIDwhLS0gTW91bnRhaW4gTXVyaWEgZmFpbnQgcGVha3MgYmVoaW5kIGJ1aWxkaW5nIC0tPgogICAgPHBhdGggZD0iTTE1LDE2NiBMNjUsOTUgTDExNSwxNDUgTDE4MCw2OCBMMjQ1LDE0NSBMMjk1LDk1IEwzNDUsMTY2IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1kYXNoYXJyYXk9IjMsMyIgb3BhY2l0eT0iMC40Ii8+CgogICAgPCEtLSBUeXBvZ3JhcGh5OiBbIExFR0FDWSBPRiBNVVJJQSBdICYgT05FIE5BTUUsIEVORExFU1MgSk9VUk5FWSAtLT4KICAgIDx0ZXh0IHg9IjE4MCIgeT0iMjEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSInU2Vnb2UgVUknLCBSb2JvdG8sICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjE0IiBsZXR0ZXItc3BhY2luZz0iMy44IiBmaWxsPSIjZmZmZmZmIj5bIExFR0FDWSBPRiBNVVJJQSBdPC90ZXh0PgogICAgPHRleHQgeD0iMTgwIiB5PSIzMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IidTZWdvZSBVSScsIFJvYm90bywgJ0hlbHZldGljYSBOZXVlJywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI4MDAiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZm9udC1zaXplPSI4IiBsZXR0ZXItc3BhY2luZz0iMiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC45Ij5PTkUgTkFNRSwgRU5ETEVTUyBKT1VSTkVZPC90ZXh0PgogIDwvZz4KPC9zdmc+");
    background-size: auto 65%;
    background-repeat: no-repeat;
    background-position: right 8px center;
    opacity: 0.22;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    pointer-events: none;
    z-index: 1;
}

/* Light Mode: Deep Purple/Slate Watermark (opacity 0.16) scaled to 65% */
body:not(.dark-mode) .custom-tooltip.tt-theme-muria .tt-inner-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMTgwIiB3aWR0aD0iMzYwIiBoZWlnaHQ9IjE4MCI+CiAgPGcgZmlsbD0iIzU4MWM4NyIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDwhLS0gR3JvdW5kbGluZSAtLT4KICAgIDxyZWN0IHg9IjIwIiB5PSIxNjYiIHdpZHRoPSIzMjAiIGhlaWdodD0iMyIgcng9IjEuNSIvPgoKICAgIDwhLS0gTWFpbiAyLXN0b3J5IGJ1aWxkaW5nIGJsb2NrIC0tPgogICAgPHJlY3QgeD0iNzUiIHk9IjcyIiB3aWR0aD0iMjEwIiBoZWlnaHQ9Ijk0IiByeD0iMiIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8IS0tIEZsb29yIGRpdmlkZXIgY29ybmljZSAtLT4KICAgIDxyZWN0IHg9IjczIiB5PSIxMTgiIHdpZHRoPSIyMTQiIGhlaWdodD0iMyIgcng9IjEiLz4KCiAgICA8IS0tIExlZnQgRHV0Y2ggVG93ZXIgLS0+CiAgICA8cmVjdCB4PSI0MiIgeT0iNTIiIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMTQiIHJ4PSIyIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMzgsNTIgODQsNTIgODEsNDUgNDEsNDUiLz4KICAgIDwhLS0gRG9tZSAvIEN1cG9sYSAtLT4KICAgIDxwYXRoIGQ9Ik00Myw0NSBDNDMsMjYgNTEsMTQgNjEsOCBDNzEsMTQgNzksMjYgNzksNDUgWiIvPgogICAgPGxpbmUgeDE9IjYxIiB5MT0iOCIgeDI9IjYxIiB5Mj0iMiIgc3Ryb2tlPSIjNTgxYzg3IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSI2MSIgY3k9IjIiIHI9IjIiLz4KCiAgICA8IS0tIFJpZ2h0IER1dGNoIFRvd2VyIC0tPgogICAgPHJlY3QgeD0iMjgwIiB5PSI1MiIgd2lkdGg9IjM4IiBoZWlnaHQ9IjExNCIgcng9IjIiIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyNzYsNTIgMzIyLDUyIDMxOSw0NSAyNzksNDUiLz4KICAgIDwhLS0gRG9tZSAvIEN1cG9sYSAtLT4KICAgIDxwYXRoIGQ9Ik0yODEsNDUgQzI4MSwyNiAyODksMTQgMjk5LDggQzMwOSwxNCAzMTcsMjYgMzE3LDQ1IFoiLz4KICAgIDxsaW5lIHgxPSIyOTkiIHkxPSI4IiB4Mj0iMjk5IiB5Mj0iMiIgc3Ryb2tlPSIjNTgxYzg3IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSIyOTkiIGN5PSIyIiByPSIyIi8+CgogICAgPCEtLSBDZW50cmFsIEZyb250aXNwaWVjZSAvIER1dGNoIEdhYmxlIHdpdGggQXJjaGVkIFN0YWluZWQgR2xhc3MgLS0+CiAgICA8cGF0aCBkPSJNMTUwLDcyIEwxNTAsNTYgUTE1MCwzOCAxODAsMzMgUTIxMCwzOCAyMTAsNTYgTDIxMCw3MiBaIi8+CiAgICA8cG9seWdvbiBwb2ludHM9IjE0NCw3MiAyMTYsNzIgMTgwLDQyIiBmaWxsLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwhLS0gTGFyZ2UgQ2VudHJhbCBSb3NlIC8gQXJjaGVkIFN0YWluZWQgV2luZG93IC0tPgogICAgPGNpcmNsZSBjeD0iMTgwIiBjeT0iNTQiIHI9IjExIiBmaWxsPSJub25lIiBzdHJva2U9IiM1ODFjODciIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGxpbmUgeDE9IjE3MiIgeTE9IjU0IiB4Mj0iMTg4IiB5Mj0iNTQiIHN0cm9rZT0iIzU4MWM4NyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICAgIDxsaW5lIHgxPSIxODAiIHkxPSI0NiIgeDI9IjE4MCIgeTI9IjYyIiBzdHJva2U9IiM1ODFjODciIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgICA8Y2lyY2xlIGN4PSIxODAiIGN5PSI1NCIgcj0iNSIgZmlsbD0iIzU4MWM4NyIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KCiAgICA8IS0tIE1haW4gUm9vZiBoaXBzIC0tPgogICAgPHBvbHlnb24gcG9pbnRzPSI4MCw3MiAxNTAsNzIgMTUwLDYyIDgwLDY4IiBmaWxsLW9wYWNpdHk9IjAuMiIvPgogICAgPHBvbHlnb24gcG9pbnRzPSIyODAsNzIgMjEwLDcyIDIxMCw2MiAyODAsNjgiIGZpbGwtb3BhY2l0eT0iMC4yIi8+CgogICAgPCEtLSBMZWZ0IFdpbmcgVXBwZXIgRmxvb3IgQXJjaGVzIChUaGUgVGhvdXNhbmQgRG9vcnMgLyBXaW5kb3dzKSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg2LCA4MikiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIyOCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNTYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgPC9nPgogICAgPCEtLSBMZWZ0IFdpbmcgTG93ZXIgRmxvb3IgQXJjaGVzIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODYsIDEyOCkiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMTQiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIyOCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjQyIiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNTYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgPC9nPgoKICAgIDwhLS0gUmlnaHQgV2luZyBVcHBlciBGbG9vciBBcmNoZXMgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYsIDgyKSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSIxNCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjI4IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iNDIiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjI0IiByeD0iNCIvPgogICAgICA8cmVjdCB4PSI1NiIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjQiIHJ4PSI0Ii8+CiAgICA8L2c+CiAgICA8IS0tIFJpZ2h0IFdpbmcgTG93ZXIgRmxvb3IgQXJjaGVzIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE2LCAxMjgpIj4KICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjE0IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgICAgPHJlY3QgeD0iMjgiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgICA8cmVjdCB4PSI0MiIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMzAiIHJ4PSI0Ii8+CiAgICAgIDxyZWN0IHg9IjU2IiB5PSIwIiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgIDwvZz4KCiAgICA8IS0tIENlbnRlciBVcHBlciBQb3J0aWNvIFdpbmRvd3MgLS0+CiAgICA8cmVjdCB4PSIxNjAiIHk9IjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iMjYiIHJ4PSI1Ii8+CiAgICA8cmVjdCB4PSIxNzUiIHk9Ijc2IiB3aWR0aD0iMTAiIGhlaWdodD0iMzAiIHJ4PSI1Ii8+CiAgICA8cmVjdCB4PSIxOTAiIHk9IjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iMjYiIHJ4PSI1Ii8+CgogICAgPCEtLSBDZW50ZXIgR3JhbmQgRW50cmFuY2UgQXJjaHdheSAtLT4KICAgIDxwYXRoIGQ9Ik0xNjYsMTY2IEwxNjYsMTMyIFExNjYsMTIyIDE4MCwxMjIgUTE5NCwxMjIgMTk0LDEzMiBMMTk0LDE2NiBaIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogICAgPHJlY3QgeD0iMTcyIiB5PSIxMzYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIzMCIgcng9IjgiLz4KCiAgICA8IS0tIExlZnQgVG93ZXIgV2luZG93cyAtLT4KICAgIDxyZWN0IHg9IjUwIiB5PSI2MCIgd2lkdGg9IjgiIGhlaWdodD0iMTYiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSI2NCIgeT0iNjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjE2IiByeD0iNCIvPgogICAgPHJlY3QgeD0iNTAiIHk9Ijg4IiB3aWR0aD0iOCIgaGVpZ2h0PSIyMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjY0IiB5PSI4OCIgd2lkdGg9IjgiIGhlaWdodD0iMjAiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSI1MCIgeT0iMTI4IiB3aWR0aD0iOCIgaGVpZ2h0PSIzMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjY0IiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgoKICAgIDwhLS0gUmlnaHQgVG93ZXIgV2luZG93cyAtLT4KICAgIDxyZWN0IHg9IjI4OCIgeT0iNjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjE2IiByeD0iNCIvPgogICAgPHJlY3QgeD0iMzAyIiB5PSI2MCIgd2lkdGg9IjgiIGhlaWdodD0iMTYiIHJ4PSI0Ii8+CiAgICA8cmVjdCB4PSIyODgiIHk9Ijg4IiB3aWR0aD0iOCIgaGVpZ2h0PSIyMCIgcng9IjQiLz4KICAgIDxyZWN0IHg9IjMwMiIgeT0iODgiIHdpZHRoPSI4IiBoZWlnaHQ9IjIwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMjg4IiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgogICAgPHJlY3QgeD0iMzAyIiB5PSIxMjgiIHdpZHRoPSI4IiBoZWlnaHQ9IjMwIiByeD0iNCIvPgoKICAgIDwhLS0gTW91bnRhaW4gTXVyaWEgZmFpbnQgcGVha3MgYmVoaW5kIGJ1aWxkaW5nIC0tPgogICAgPHBhdGggZD0iTTE1LDE2NiBMNjUsOTUgTDExNSwxNDUgTDE4MCw2OCBMMjQ1LDE0NSBMMjk1LDk1IEwzNDUsMTY2IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU4MWM4NyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1kYXNoYXJyYXk9IjMsMyIgb3BhY2l0eT0iMC40Ii8+CgogICAgPCEtLSBUeXBvZ3JhcGh5OiBbIExFR0FDWSBPRiBNVVJJQSBdICYgT05FIE5BTUUsIEVORExFU1MgSk9VUk5FWSAtLT4KICAgIDx0ZXh0IHg9IjE4MCIgeT0iMjEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSInU2Vnb2UgVUknLCBSb2JvdG8sICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjE0IiBsZXR0ZXItc3BhY2luZz0iMy44IiBmaWxsPSIjNTgxYzg3Ij5bIExFR0FDWSBPRiBNVVJJQSBdPC90ZXh0PgogICAgPHRleHQgeD0iMTgwIiB5PSIzMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IidTZWdvZSBVSScsIFJvYm90bywgJ0hlbHZldGljYSBOZXVlJywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI4MDAiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZm9udC1zaXplPSI4IiBsZXR0ZXItc3BhY2luZz0iMiIgZmlsbD0iIzU4MWM4NyIgb3BhY2l0eT0iMC45Ij5PTkUgTkFNRSwgRU5ETEVTUyBKT1VSTkVZPC90ZXh0PgogIDwvZz4KPC9zdmc+");
    background-size: auto 65%;
    background-repeat: no-repeat;
    background-position: right 8px center;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 1) 85%);
    pointer-events: none;
    z-index: 1;
}

.custom-tooltip.tt-theme-muria .tt-body-grid {
    position: relative;
    z-index: 2;
}
.custom-tooltip.tt-theme-muria .tt-speed-col {
    border-left: none !important;
    background: transparent !important;
}
.custom-tooltip.tt-theme-muria .tt-title {
    color: var(--muria-c1, #86198f) !important;
}
body.dark-mode .custom-tooltip.tt-theme-muria .tt-title {
    color: #f0abfc !important;
}
.custom-tooltip.tt-theme-muria .tt-status {
    color: var(--muria-c1, #86198f) !important;
}
body.dark-mode .custom-tooltip.tt-theme-muria .tt-status {
    color: #f0abfc !important;
}
.custom-tooltip.tt-theme-muria .tt-speed-huge {
    color: #0f172a !important;
}
body.dark-mode .custom-tooltip.tt-theme-muria .tt-speed-huge {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.custom-tooltip.tt-theme-muria .tt-speed-unit-label {
    color: #334155 !important;
    font-weight: 700 !important;
}
body.dark-mode .custom-tooltip.tt-theme-muria .tt-speed-unit-label {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
}
.custom-tooltip.tt-theme-muria .tt-subtitle {
    color: #334155 !important;
    font-weight: 600;
}
body.dark-mode .custom-tooltip.tt-theme-muria .tt-subtitle {
    color: #cbd5e1 !important;
    font-weight: 600;
}
.custom-tooltip.tt-theme-muria .tt-loco-svg {
    color: var(--muria-c1, #86198f) !important;
}
body.dark-mode .custom-tooltip.tt-theme-muria .tt-loco-svg {
    color: #f0abfc !important;
}

.custom-tooltip.tt-theme-muria .tt-footer-strip {
    background: var(--muria-c1, #86198f) !important;
    color: #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
}

/* User Distance in Detail Pane */
.detail-dist-user {
    font-size: 12.5px;
    line-height: 1.4;
}

/* Tooltip Loco & Special Livery Detail Styling */
.tt-special-banner {
    margin: 4px 0 4px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    gap: 4px;
}

.tt-special-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    letter-spacing: 0.2px;
}

.tt-traction-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    letter-spacing: 0.2px;
}

.tt-loco {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    margin: 3px 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.2px;
}

.tt-loco i {
    font-size: 12px;
    color: var(--blue);
}

/* Android App Controls & Download Button */
@keyframes androidPulseSlow {

    0%,
    100% {
        color: var(--text-main);
        filter: drop-shadow(0 0 0 rgba(61, 220, 132, 0));
    }

    50% {
        color: #3DDC84;
        filter: drop-shadow(0 0 6px rgba(61, 220, 132, 0.6));
    }
}

#btnAndroidApp i {
    animation: androidPulseSlow 3s ease-in-out infinite;
    display: inline-block;
    transition: color 0.3s ease;
}

#btnAndroidApp:hover i {
    animation: none;
    color: #3DDC84;
    filter: drop-shadow(0 0 8px rgba(61, 220, 132, 0.8));
}

#btnDirectDownloadApk {
    background: #3DDC84 !important;
    color: #073042 !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(61, 220, 132, 0.4) !important;
    transition: all 0.2s ease !important;
}

#btnDirectDownloadApk:hover {
    background: #32c474 !important;
    color: #073042 !important;
    box-shadow: 0 6px 18px rgba(61, 220, 132, 0.5) !important;
    transform: translateY(-1px);
}

/* Active Assignment indicator dot on marker */
.train-marker.has-loco-assigned .marker-circle::after,
.train-marker.has-loco-assigned .marker-shape::after,
.train-marker.has-multi-loco .marker-circle::after,
.train-marker.has-multi-loco .marker-shape::after {
    display: none !important;
}

/* Fallback directional heading angles based on general axis class */
.train-marker.has-loco-assigned.dir-w {
    --loco-fallback-heading: 270deg;
}

.train-marker.has-loco-assigned.dir-e {
    --loco-fallback-heading: 90deg;
}

.train-marker.has-loco-assigned.dir-n {
    --loco-fallback-heading: 0deg;
}

.train-marker.has-loco-assigned.dir-s {
    --loco-fallback-heading: 180deg;
}

/* ==========================================================================
   Locomotive Assignment Dots (Single, DT 2-Dots, TT 3-Dots, Multi-Traction)
   ========================================================================== */
.marker-loco-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%) rotate(var(--loco-heading, var(--loco-fallback-heading, 90deg)));
    transform-origin: center center;
    pointer-events: none;
    z-index: 6;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.loco-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: var(--dot-fill-color, var(--blue, #0778aa));
    border: 1.5px solid var(--dot-outline-color, var(--train-outline, #ffffff));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transform-origin: center center;
}

body.dark-mode .loco-dot {
    background: var(--dot-fill-color, var(--blue, #0778aa));
    border-color: var(--dot-outline-color, var(--train-outline, #ffffff));
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

/* 1. Single Locomotive Assignment (Normal Dot - Compact Size) */
.marker-loco-dots.type-single .loco-dot {
    width: calc(0.38 * var(--marker-size, 10px));
    height: calc(0.38 * var(--marker-size, 10px));
    min-width: 4px;
    min-height: 4px;
    border-width: 1px;
}

.marker-loco-dots.type-single .dot-1 {
    transform: translate(-50%, -50%) translateY(calc(-0.48 * var(--marker-size, 10px)));
}

/* 2. Double Traction (DT: 2 Clean Dots aligned in heading direction) */
.marker-loco-dots.type-dt .loco-dot {
    width: calc(0.34 * var(--marker-size, 10px));
    height: calc(0.34 * var(--marker-size, 10px));
    min-width: 3.5px;
    min-height: 3.5px;
    border-width: 1px;
}

.marker-loco-dots.type-dt .dot-1 {
    transform: translate(-50%, -50%) rotate(-14deg) translateY(calc(-0.52 * var(--marker-size, 10px)));
}

.marker-loco-dots.type-dt .dot-2 {
    transform: translate(-50%, -50%) rotate(14deg) translateY(calc(-0.52 * var(--marker-size, 10px)));
}

/* 3. Triple Traction (TT: 3 Clean Dots aligned in heading direction) */
.marker-loco-dots.type-tt .loco-dot {
    width: calc(0.30 * var(--marker-size, 10px));
    height: calc(0.30 * var(--marker-size, 10px));
    min-width: 3px;
    min-height: 3px;
    border-width: 1px;
}

.marker-loco-dots.type-tt .dot-1 {
    transform: translate(-50%, -50%) rotate(-22deg) translateY(calc(-0.54 * var(--marker-size, 10px)));
}

.marker-loco-dots.type-tt .dot-2 {
    transform: translate(-50%, -50%) rotate(0deg) translateY(calc(-0.56 * var(--marker-size, 10px)));
}

.marker-loco-dots.type-tt .dot-3 {
    transform: translate(-50%, -50%) rotate(22deg) translateY(calc(-0.54 * var(--marker-size, 10px)));
}

/* 4. Multi-Traction (4+ Locomotives: 4 Clean Dots aligned in heading direction) */
.marker-loco-dots.type-multi .loco-dot {
    width: calc(0.28 * var(--marker-size, 10px));
    height: calc(0.28 * var(--marker-size, 10px));
    min-width: 3px;
    min-height: 3px;
    border-width: 1px;
}

.marker-loco-dots.type-multi .dot-1 {
    transform: translate(-50%, -50%) rotate(-30deg) translateY(calc(-0.54 * var(--marker-size, 10px)));
}

.marker-loco-dots.type-multi .dot-2 {
    transform: translate(-50%, -50%) rotate(-10deg) translateY(calc(-0.56 * var(--marker-size, 10px)));
}

.marker-loco-dots.type-multi .dot-3 {
    transform: translate(-50%, -50%) rotate(10deg) translateY(calc(-0.56 * var(--marker-size, 10px)));
}

.marker-loco-dots.type-multi .dot-4 {
    transform: translate(-50%, -50%) rotate(30deg) translateY(calc(-0.54 * var(--marker-size, 10px)));
}

/* ==========================================================================
   Normal Assignment Subtle Left & Right Vertical Stripes on Marker Label
   Strictly retains the exact normal label pill shape & design (no box shape)
   ========================================================================== */
.train-marker.normal-assign-kai:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-sumatra:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krl-jepang:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krl-inka:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krl-china:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-custom:not(.special-livery-marker) .marker-text {
    padding-left: 9px !important;
}

.train-marker.has-multi-loco.normal-assign-kai:not(.special-livery-marker) .marker-text,
.train-marker.has-multi-loco.normal-assign-sumatra:not(.special-livery-marker) .marker-text,
.train-marker.has-multi-loco.normal-assign-krl-jepang:not(.special-livery-marker) .marker-text,
.train-marker.has-multi-loco.normal-assign-krl-inka:not(.special-livery-marker) .marker-text,
.train-marker.has-multi-loco.normal-assign-krl-china:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-text,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-text,
.train-marker.has-multi-loco.normal-assign-custom:not(.special-livery-marker) .marker-text,
.train-marker:has(.marker-stripe-right):not(.special-livery-marker) .marker-text {
    padding-right: 9px !important;
}

/* ==========================================================================
   Normal Assignment Marker Label Background (Last Color of Livery Scheme)
   Applies to eligible categories: Passenger - Intercity, Freight, Local, Commuter
   ========================================================================== */
.train-marker.normal-assign-kai:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-kai:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: #1e40af !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.train-marker.normal-assign-sumatra:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-sumatra:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* LRT & MRT Marker: Consistent Theme-Independent Vibrant Fill in Light and Dark Maps */
.train-marker.is-lrt-mrt .marker-text,
body.dark-mode .train-marker.is-lrt-mrt .marker-text,
body.dark-theme .train-marker.is-lrt-mrt .marker-text,
[data-theme="dark"] .train-marker.is-lrt-mrt .marker-text {
    background: var(--lrt-mrt-marker-bg, var(--train-color, #cb2026)) !important;
    color: var(--lrt-mrt-marker-color, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Commuter Line / KRL Normal Assignment Label: Uses Fill Override (Line) Color */
.train-marker.normal-assign-krl-jepang:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krl-jepang:not(.special-livery-marker) .marker-text.normal-assign-bg,
.train-marker.normal-assign-krl-china:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krl-china:not(.special-livery-marker) .marker-text.normal-assign-bg,
.train-marker.normal-assign-krl-inka:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krl-inka:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: var(--krl-marker-bg, var(--train-color, #dc2626)) !important;
    color: var(--krl-marker-color, #ffffff) !important;
    border-color: var(--krl-marker-border, rgba(255, 255, 255, 0.35)) !important;
}

.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krde:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-text.normal-assign-bg,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-krd:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

.train-marker.normal-assign-custom:not(.special-livery-marker) .marker-text.normal-assign-bg,
body.dark-mode .train-marker.normal-assign-custom:not(.special-livery-marker) .marker-text.normal-assign-bg {
    background: var(--custom-marker-bg, #1e40af) !important;
    color: var(--custom-marker-color, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Left Vertical Stripe on Label */
.train-marker.normal-assign-kai:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-sumatra:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krl-jepang:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krl-inka:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krl-china:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-custom:not(.special-livery-marker) .marker-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    pointer-events: none;
    z-index: 2;
}

.train-marker.normal-assign-kai:not(.special-livery-marker) .marker-text::before {
    background: linear-gradient(to bottom, #f97316 0%, #f97316 33.3%, #ffffff 33.3%, #ffffff 66.6%, #1e40af 66.6%, #1e40af 100%);
}

.train-marker.normal-assign-sumatra:not(.special-livery-marker) .marker-text::before {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #1e3a8a 50%, #1e3a8a 100%);
}

.train-marker.normal-assign-krl-jepang:not(.special-livery-marker) .marker-text::before {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #dc2626 50%, #dc2626 100%);
}

.train-marker.normal-assign-krl-inka:not(.special-livery-marker) .marker-text::before {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #ffffff 50%, #ffffff 100%);
}

.train-marker.normal-assign-krl-china:not(.special-livery-marker) .marker-text::before {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #f59e0b 50%, #f59e0b 100%);
}

.train-marker.normal-assign-custom:not(.special-livery-marker) .marker-text::before {
    background: var(--custom-marker-stripe, #f97316);
}

.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-text::before {
    background: var(--custom-marker-stripe, linear-gradient(to bottom, #008080 0%, #008080 33.3%, #ffffff 33.3%, #ffffff 66.6%, #dc2626 66.6%, #dc2626 100%));
}

.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-text::before {
    background: var(--custom-marker-stripe, linear-gradient(to bottom, #ea580c 0%, #ea580c 33.3%, #eab308 33.3%, #eab308 66.6%, #2563eb 66.6%, #2563eb 100%));
}

.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-text::before,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-text::before {
    background: var(--custom-marker-stripe, linear-gradient(to bottom, #16a34a 0%, #16a34a 50%, #ffffff 50%, #ffffff 100%));
}

/* Right Vertical Stripe on Label for Multi-Traction (DT, TT, FT) or KRD/Custom/Double Trainset */
.marker-stripe-right,
.train-marker.normal-assign-custom:not(.special-livery-marker) .marker-stripe-right,
.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-stripe-right,
.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-stripe-right,
.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-stripe-right,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-stripe-right,
.train-marker.has-multi-loco:not(.special-livery-marker) .marker-stripe-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    pointer-events: none;
    z-index: 2;
}

.train-marker.normal-assign-kai:not(.special-livery-marker) .marker-stripe-right {
    background: linear-gradient(to bottom, #f97316 0%, #f97316 33.3%, #ffffff 33.3%, #ffffff 66.6%, #1e40af 66.6%, #1e40af 100%);
}

.train-marker.normal-assign-sumatra:not(.special-livery-marker) .marker-stripe-right {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #1e3a8a 50%, #1e3a8a 100%);
}

.train-marker.normal-assign-krl-jepang:not(.special-livery-marker) .marker-stripe-right {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #dc2626 50%, #dc2626 100%);
}

.train-marker.normal-assign-krl-inka:not(.special-livery-marker) .marker-stripe-right {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #ffffff 50%, #ffffff 100%);
}

.train-marker.normal-assign-krl-china:not(.special-livery-marker) .marker-stripe-right {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #f59e0b 50%, #f59e0b 100%);
}

.train-marker.normal-assign-custom:not(.special-livery-marker) .marker-stripe-right {
    background: var(--custom-marker-stripe, #f97316);
}

.train-marker.normal-assign-krde:not(.special-livery-marker) .marker-stripe-right {
    background: var(--custom-marker-stripe, linear-gradient(to bottom, #008080 0%, #008080 33.3%, #ffffff 33.3%, #ffffff 66.6%, #dc2626 66.6%, #dc2626 100%));
}

.train-marker.normal-assign-krdi:not(.special-livery-marker) .marker-stripe-right {
    background: var(--custom-marker-stripe, linear-gradient(to bottom, #ea580c 0%, #ea580c 33.3%, #eab308 33.3%, #eab308 66.6%, #2563eb 66.6%, #2563eb 100%));
}

.train-marker.normal-assign-krdh:not(.special-livery-marker) .marker-stripe-right,
.train-marker.normal-assign-krd:not(.special-livery-marker) .marker-stripe-right {
    background: var(--custom-marker-stripe, linear-gradient(to bottom, #16a34a 0%, #16a34a 50%, #ffffff 50%, #ffffff 100%));
}

/* ==========================================================================
   Normal Assignment Hover Tooltip Left & Right Stripes
   ========================================================================== */
.custom-tooltip.normal-assign-tooltip,
.custom-tooltip:has(.tt-normal-stripe),
.leaflet-tooltip:has(.tt-normal-stripe) {
    position: relative !important;
    overflow: hidden !important;
}

.custom-tooltip.normal-assign-tooltip.assign-single,
.custom-tooltip:has(.tt-stripe-left),
.leaflet-tooltip:has(.tt-stripe-left) {
    padding: 0 !important;
}

.custom-tooltip.normal-assign-tooltip.assign-multi,
.custom-tooltip:has(.tt-stripe-right),
.leaflet-tooltip:has(.tt-stripe-right) {
    padding: 0 !important;
}

.custom-tooltip.normal-assign-tooltip .tt-normal-stripe,
.custom-tooltip .tt-normal-stripe,
.leaflet-tooltip .tt-normal-stripe,
.tt-normal-stripe {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4.5px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

.custom-tooltip.normal-assign-tooltip .tt-stripe-left,
.custom-tooltip .tt-normal-stripe.tt-stripe-left,
.leaflet-tooltip .tt-normal-stripe.tt-stripe-left,
.tt-normal-stripe.tt-stripe-left {
    left: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.custom-tooltip.normal-assign-tooltip .tt-stripe-right,
.custom-tooltip .tt-normal-stripe.tt-stripe-right,
.leaflet-tooltip .tt-normal-stripe.tt-stripe-right,
.tt-normal-stripe.tt-stripe-right {
    right: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

/* Gradients with parent container selectors */
.custom-tooltip.normal-assign-tooltip.normal-assign-kai .tt-normal-stripe,
.tt-normal-stripe.normal-assign-kai {
    background: linear-gradient(to bottom, #f97316 0%, #f97316 33.3%, #ffffff 33.3%, #ffffff 66.6%, #1e40af 66.6%, #1e40af 100%);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-sumatra .tt-normal-stripe,
.tt-normal-stripe.normal-assign-sumatra {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #1e3a8a 50%, #1e3a8a 100%);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-krl-jepang .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krl-jepang {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #dc2626 50%, #dc2626 100%);
    border-right: 0.5px solid rgba(0, 0, 0, 0.15);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-krl-inka .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krl-inka {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #ffffff 50%, #ffffff 100%);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-krl-china .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krl-china {
    background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #f59e0b 50%, #f59e0b 100%);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-custom .tt-normal-stripe,
.tt-normal-stripe.normal-assign-custom {
    background: var(--custom-marker-stripe, #f97316);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-krde .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krde {
    background: linear-gradient(to bottom, #008080 0%, #008080 33.3%, #ffffff 33.3%, #ffffff 66.6%, #dc2626 66.6%, #dc2626 100%);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-krdi .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krdi {
    background: linear-gradient(to bottom, #ea580c 0%, #ea580c 33.3%, #eab308 33.3%, #eab308 66.6%, #2563eb 66.6%, #2563eb 100%);
}

.custom-tooltip.normal-assign-tooltip.normal-assign-krdh .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krdh,
.custom-tooltip.normal-assign-tooltip.normal-assign-krd .tt-normal-stripe,
.tt-normal-stripe.normal-assign-krd {
    background: linear-gradient(to bottom, #16a34a 0%, #16a34a 50%, #ffffff 50%, #ffffff 100%);
}

/* Quick Active Filters Floating Group */
#quickActiveFiltersGroup {
    transition: all 0.3s ease;
}

#quickActiveFiltersGroup .glass-btn {
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#quickActiveFiltersGroup .glass-btn:hover {
    transform: scale(1.08);
    background: rgba(128, 128, 128, 0.15);
}

#quickActiveFiltersGroup .glass-btn:active {
    transform: scale(0.95);
}

/* Star Slow Blink Animation (Gentle pulse between Amber Gold and Pink/Magenta) */
@keyframes specialStarBlink {

    0%,
    100% {
        color: #f59e0b;
        filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.45));
        transform: scale(1);
    }

    50% {
        color: #ec4899;
        filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.75));
        transform: scale(1.15);
    }
}

#btnActiveSpecialTrains i {
    animation: specialStarBlink 2.6s infinite ease-in-out;
    display: inline-block;
}

/* Active Train Cards in Quick Modals */
.active-train-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

.active-train-card:hover {
    background: rgba(128, 128, 128, 0.12);
    border-color: var(--blue);
    transform: translateY(-1.5px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.active-train-card:active {
    transform: translateY(0);
}

.active-train-card .card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.active-train-card .card-train-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.active-train-card .card-loco-tag {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Outfit', 'Inter', monospace, sans-serif;
    color: var(--blue);
    background: rgba(7, 120, 170, 0.12);
    border: 1px solid rgba(7, 120, 170, 0.25);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

body.dark-mode .active-train-card .card-loco-tag {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.active-train-card .card-loco-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0 2px 0;
    flex-wrap: wrap;
}

.active-train-card .card-special-row {
    display: flex;
    align-items: center;
    margin: 3px 0 2px 0;
}

.active-train-card .card-special-tag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.active-train-card .card-traction-tag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(238, 65, 125, 0.12);
    border: 1px solid rgba(238, 65, 125, 0.3);
    color: var(--pink);
    white-space: nowrap;
    flex-shrink: 0;
}

body.dark-mode .active-train-card .card-traction-tag {
    background: rgba(238, 65, 125, 0.2);
    border-color: rgba(238, 65, 125, 0.45);
    color: #f472b6;
}

.active-train-card .card-route {
    font-size: 12px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-train-card .card-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px dashed var(--glass-border);
}

.active-train-card .card-status-text {
    font-weight: 600;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-train-card .card-speed-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    white-space: nowrap;
    flex-shrink: 0;
}

.active-train-card .card-action-icon {
    color: var(--text-sub);
    font-size: 12px;
    transition: transform 0.2s, color 0.2s;
    margin-left: 6px;
    flex-shrink: 0;
}

.active-train-card:hover .card-action-icon {
    color: var(--blue);
    transform: translateX(3px);
}

.active-modal-empty {
    text-align: center;
    padding: 35px 20px;
    color: var(--text-sub);
    font-size: 13px;
    line-height: 1.5;
}

.active-modal-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.45;
    display: block;
}

/* Modal Search Bar Styling */
.active-modal-search-bar {
    position: relative;
    width: 100%;
}

.active-modal-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 32px 8px 34px !important;
    background: rgba(128, 128, 128, 0.1) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 9px !important;
    color: var(--text-main) !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.active-modal-search-input:focus {
    border-color: var(--blue) !important;
    background: rgba(128, 128, 128, 0.16) !important;
    box-shadow: 0 0 0 2px rgba(7, 120, 170, 0.2) !important;
}

body.dark-mode .active-modal-search-input:focus {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25) !important;
}

.active-modal-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: var(--text-sub) !important;
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s;
}

.active-modal-search-clear:hover {
    color: var(--text-main) !important;
}

/* Modal Pagination Styling */
.active-modal-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

.active-modal-page-info {
    font-size: 11.5px;
    color: var(--text-sub);
    font-weight: 500;
}

.active-modal-page-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.active-page-btn {
    padding: 5px 10px !important;
    background: rgba(128, 128, 128, 0.14) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 7px !important;
    color: var(--text-main) !important;
    font-size: 11.5px !important;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.active-page-btn:hover:not(:disabled) {
    background: var(--blue) !important;
    color: #ffffff !important;
    border-color: var(--blue) !important;
}

.active-page-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.active-page-indicator {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main);
    min-width: 44px;
    text-align: center;
    font-family: 'Outfit', 'Inter', monospace, sans-serif;
}

#quickActiveFiltersGroup {
    display: none !important;
}

#quickActiveFiltersGroup.has-active {
    display: flex !important;
}

#quickActiveFiltersGroup .glass-btn:not(.is-active) {
    display: none !important;
}

#quickActiveFiltersGroup .glass-btn.is-active {
    display: flex !important;
}

/* ==========================================================================
   Special Livery Detail Pane Full-Width Banner
   ========================================================================== */
.special-pane-banner-wrapper {
    width: 100%;
    max-width: 400px;
    margin: -5px auto 15px auto;
    display: flex;
    justify-content: center;
}

.special-pane-banner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

body.dark-mode .special-pane-banner {
    background: #1e293b;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

.special-pane-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    width: 100%;
    z-index: 2;
    border-radius: 8px 8px 0 0;
}

.special-pane-banner.special-pulse-1::before {
    background: var(--special-c1, #f59e0b) !important;
}

.special-pane-banner.special-pulse-2::before {
    background: linear-gradient(to right,
            var(--special-c1, #ef4444) 0%,
            var(--special-c1, #ef4444) 50%,
            var(--special-c2, #3b82f6) 50%,
            var(--special-c2, #3b82f6) 100%) !important;
}

.special-pane-banner.special-pulse-3::before {
    background: linear-gradient(to right,
            var(--special-c1, #ef4444) 0%,
            var(--special-c1, #ef4444) 33.33%,
            var(--special-c2, #ffffff) 33.33%,
            var(--special-c2, #ffffff) 66.66%,
            var(--special-c3, #3b82f6) 66.66%,
            var(--special-c3, #3b82f6) 100%) !important;
}

.special-pane-banner .special-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px 6px 12px;
    box-sizing: border-box;
    gap: 8px;
}

.special-pane-banner .special-pane-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

/* Animated Train Marker Visual in Detail Pane Badge */
.special-pane-banner .special-pane-mini-marker {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.special-pane-banner .special-pane-mini-marker .mini-marker-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: relative;
    box-sizing: border-box;
    border: 2.5px solid var(--special-c1, #f59e0b);
    background: var(--train-color, #0778aa);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.special-pane-banner .special-pane-mini-marker.special-pulse-1 .mini-marker-circle {
    border-color: var(--special-c1, #f59e0b) !important;
    animation: aluSpecialBlink1 2.8s infinite ease-in-out !important;
}

.special-pane-banner .special-pane-mini-marker.special-pulse-2 .mini-marker-circle {
    border-color: var(--special-c1, #ef4444) !important;
    animation: aluSpecialBlink2 3.8s infinite ease-in-out !important;
}

.special-pane-banner .special-pane-mini-marker.special-pulse-3 .mini-marker-circle {
    border-color: var(--special-c1, #ef4444) !important;
    animation: aluSpecialBlink3 4.8s infinite ease-in-out !important;
}

.special-pane-banner .special-pane-star {
    font-size: 15px;
    color: #f59e0b;
    animation: specialStarBlink 2.6s infinite ease-in-out;
    flex-shrink: 0;
}

.special-pane-banner .special-pane-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.special-pane-banner .special-pane-title {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.special-pane-banner .special-pane-subtitle {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.82;
    line-height: 1.2;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
}

.special-pane-banner .special-pane-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    /* Light Mode: Brightest special color for pill bg, dark text */
    background: var(--special-bright-c, #f8fafc) !important;
    color: var(--special-bright-text, #1e293b) !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .special-pane-banner .special-pane-pill {
    /* Dark Mode: Darkest special color for pill bg, white text */
    background: var(--special-dark-c, #1e293b) !important;
    color: var(--special-dark-text, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   KPJR, KLB & KAIS Rotating LED Outline & Strobe Neon Beacon
   ========================================================================== */
.klb-outline-red,
.klb-outline-blue,
.train-marker.is-klb-marker {
    --led-base-color: #ff8a80 !important;
    --led-spin-color: #ff1744 !important;
    --led-spin-rgb: 255, 23, 68 !important;
    --maint-outline-color: #ff1744 !important;
}

.kpjr-outline-orange,
.train-marker.is-maintenance-marker {
    --led-base-color: #FAD5A5 !important;
    --led-spin-color: #E49B0F !important;
    --led-spin-rgb: 228, 155, 15 !important;
    --maint-outline-color: #E49B0F !important;
}

.is-inspection-marker,
.train-marker.is-inspection-marker {
    --led-base-color: #ff8a80 !important;
    --led-spin-color: #ff1744 !important;
    --led-spin-rgb: 255, 23, 68 !important;
    --maint-outline-color: #ff1744 !important;
}

.train-marker.maint-insp-led-running .marker-circle {
    border: 2.5px solid var(--led-spin-color, #ff1744) !important;
    box-shadow: 0 0 6px var(--led-spin-color, #ff1744), inset 0 0 3px var(--led-spin-color, #ff1744) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.train-marker.maint-insp-led-running:not(.klb-flash-1):not(.klb-flash-2):not(.klb-flash-3):not(.klb-flash-fallback) .marker-circle {
    animation: maintInspLedFlash 1.4s infinite linear !important;
}

/* Rotating Dissolve Strobe Lamp (Smooth organic fade on both ends with multi-layer glow, seamlessly orbiting border) */
.train-marker.maint-insp-led-running .marker-circle::after,
.train-marker.has-loco-assigned.maint-insp-led-running .marker-circle::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -2.5px !important;
    left: -2.5px !important;
    right: -2.5px !important;
    bottom: -2.5px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 150deg,
        rgba(255, 255, 255, 0) 175deg,
        rgba(255, 255, 255, 0.12) 200deg,
        rgba(255, 255, 255, 0.40) 230deg,
        rgba(255, 255, 255, 0.85) 260deg,
        #ffffff 270deg,
        rgba(255, 255, 255, 0.85) 280deg,
        rgba(255, 255, 255, 0.40) 310deg,
        rgba(255, 255, 255, 0.12) 340deg,
        rgba(255, 255, 255, 0) 355deg,
        transparent 360deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.2px), #fff calc(100% - 2.5px), #fff calc(100% - 0.5px), transparent 100%) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.2px), #fff calc(100% - 2.5px), #fff calc(100% - 0.5px), transparent 100%) !important;
    pointer-events: none !important;
    animation: rotateLedBorder 0.85s linear infinite !important;
    transform-origin: center center !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.6)) !important;
}

@keyframes rotateLedBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes maintInspLedFlash {
    0%, 100% { box-shadow: 0 0 6px var(--led-spin-color, #ff1744), inset 0 0 3px var(--led-spin-color, #ff1744); }
    50% { box-shadow: 0 0 12px var(--led-spin-color, #ff1744), 0 0 20px var(--led-base-color, #ff8a80), inset 0 0 6px var(--led-base-color, #ff8a80); }
}

/* Base outline styling for KLB / KPJR / KAIS */
.train-marker.klb-outline-red .marker-circle {
    border: 2.5px solid #ff1744 !important;
    box-shadow: 0 0 8px #ff1744, inset 0 0 3px #ff1744 !important;
}
.train-marker.kpjr-outline-orange .marker-circle {
    border: 2.5px solid #E49B0F !important;
    box-shadow: 0 0 8px #E49B0F, inset 0 0 3px #E49B0F !important;
}

/* Fast Flashing Fill for KLB / KPJR */
.train-marker.klb-flash-1 .marker-circle,
.train-marker.maint-insp-led-running.klb-flash-1 .marker-circle {
    animation: aluKlbFlash1 0.65s infinite ease-in-out !important;
}
.train-marker.klb-flash-2 .marker-circle,
.train-marker.maint-insp-led-running.klb-flash-2 .marker-circle {
    animation: aluKlbFlash2 0.70s infinite ease-in-out !important;
}
.train-marker.klb-flash-3 .marker-circle,
.train-marker.maint-insp-led-running.klb-flash-3 .marker-circle {
    animation: aluKlbFlash3 0.75s infinite ease-in-out !important;
}
.train-marker.klb-flash-fallback .marker-circle,
.train-marker.maint-insp-led-running.klb-flash-fallback .marker-circle {
    animation: aluKlbFlashFallback 0.70s infinite ease-in-out !important;
}

@keyframes aluKlbFlash1 {
    0%, 100% { background: var(--special-c1, #ff1744) !important; background-color: var(--special-c1, #ff1744) !important; }
    50% { background: var(--special-bg-base, #ffffff) !important; background-color: var(--special-bg-base, #ffffff) !important; }
}
@keyframes aluKlbFlash2 {
    0%, 48% { background: var(--special-c1, #ff1744) !important; background-color: var(--special-c1, #ff1744) !important; }
    50%, 98% { background: var(--special-c2, #ffffff) !important; background-color: var(--special-c2, #ffffff) !important; }
    100% { background: var(--special-c1, #ff1744) !important; background-color: var(--special-c1, #ff1744) !important; }
}
@keyframes aluKlbFlash3 {
    0%, 30% { background: var(--special-c1, #ff1744) !important; background-color: var(--special-c1, #ff1744) !important; }
    33%, 63% { background: var(--special-c2, #ffffff) !important; background-color: var(--special-c2, #ffffff) !important; }
    66%, 96% { background: var(--special-c3, #0055ff) !important; background-color: var(--special-c3, #0055ff) !important; }
    100% { background: var(--special-c1, #ff1744) !important; background-color: var(--special-c1, #ff1744) !important; }
}
@keyframes aluKlbFlashFallback {
    0%, 48% { background: var(--train-color, #ff1744) !important; background-color: var(--train-color, #ff1744) !important; }
    50%, 98% { background: var(--train-outline, #ffffff) !important; background-color: var(--train-outline, #ffffff) !important; }
    100% { background: var(--train-color, #ff1744) !important; background-color: var(--train-color, #ff1744) !important; }
}

/* Directional Neon Spotlight Dot at the FRONT of the Marker for KLB / KPJR / Special Livery */
.train-marker.maint-insp-led-running .marker-loco-dots .loco-dot,
.train-marker.is-inspection-marker .marker-loco-dots .loco-dot,
.train-marker.is-maintenance-marker .marker-loco-dots .loco-dot,
.train-marker.is-klb-marker .marker-loco-dots .loco-dot,
.train-marker.marker-glow-neon .marker-loco-dots .loco-dot {
    width: calc(0.42 * var(--marker-size, 10px)) !important;
    height: calc(0.42 * var(--marker-size, 10px)) !important;
    min-width: 5.5px !important;
    min-height: 5.5px !important;
    border-radius: 50% !important;
    border-style: solid !important;
    border-width: 1.5px !important;
    background: #ffffff !important;
    background-color: #ffffff !important; /* Pure brilliant xenon white core */
    box-shadow: 0 0 3px #ffffff, 0 0 7px #ffffff, 0 0 14px rgba(255, 255, 255, 0.95), 0 0 22px rgba(255, 255, 255, 0.75) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.train-marker.maint-insp-led-running .marker-loco-dots.type-single .dot-1,
.train-marker.is-inspection-marker .marker-loco-dots.type-single .dot-1,
.train-marker.is-maintenance-marker .marker-loco-dots.type-single .dot-1,
.train-marker.is-klb-marker .marker-loco-dots.type-single .dot-1,
.train-marker.marker-glow-neon .marker-loco-dots.type-single .dot-1 {
    transform: translate(-50%, -50%) translateY(calc(-0.50 * var(--marker-size, 10px))) !important;
}

/* Forward Spotlight Projection Beam */
.train-marker.maint-insp-led-running .marker-loco-dots .dot-1::after,
.train-marker.is-inspection-marker .marker-loco-dots .dot-1::after,
.train-marker.is-maintenance-marker .marker-loco-dots .dot-1::after,
.train-marker.is-klb-marker .marker-loco-dots .dot-1::after,
.train-marker.marker-glow-neon .marker-loco-dots .dot-1::after {
    content: '' !important;
    position: absolute !important;
    bottom: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 14px !important;
    height: 22px !important;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0) 100%) !important;
    clip-path: polygon(40% 100%, 60% 100%, 100% 0%, 0% 0%) !important;
    -webkit-clip-path: polygon(40% 100%, 60% 100%, 100% 0%, 0% 0%) !important;
    pointer-events: none !important;
    z-index: 9 !important;
    filter: blur(0.6px) !important;
}

/* Dot Outline Flashing in Alternate Phase from Fill with Rolling Stock Colors */
.train-marker.dot-flash-3 .marker-loco-dots .loco-dot,
.train-marker.maint-insp-led-running.klb-flash-3 .marker-loco-dots .loco-dot {
    animation: klbKpjrDotOutlineFlash3 0.75s infinite ease-in-out !important;
}
.train-marker.dot-flash-2 .marker-loco-dots .loco-dot,
.train-marker.maint-insp-led-running.klb-flash-2 .marker-loco-dots .loco-dot {
    animation: klbKpjrDotOutlineFlash2 0.70s infinite ease-in-out !important;
}
.train-marker.dot-flash-1 .marker-loco-dots .loco-dot,
.train-marker.maint-insp-led-running.klb-flash-1 .marker-loco-dots .loco-dot {
    animation: klbKpjrDotOutlineFlash1 0.65s infinite ease-in-out !important;
}
.train-marker.dot-flash-fallback .marker-loco-dots .loco-dot,
.train-marker.maint-insp-led-running.klb-flash-fallback .marker-loco-dots .loco-dot {
    animation: klbKpjrDotOutlineFlashFallback 0.70s infinite ease-in-out !important;
}

@keyframes klbKpjrDotOutlineFlash3 {
    0%, 30% { border-color: var(--special-c3, #0055ff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c3, #0055ff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    33%, 63% { border-color: var(--special-c1, #ff1744) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c1, #ff1744), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    66%, 96% { border-color: var(--special-c2, #ffffff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c2, #ffffff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    100% { border-color: var(--special-c3, #0055ff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c3, #0055ff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
}

@keyframes klbKpjrDotOutlineFlash2 {
    0%, 48% { border-color: var(--special-c2, #ffffff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c2, #ffffff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    50%, 98% { border-color: var(--special-c1, #ff1744) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c1, #ff1744), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    100% { border-color: var(--special-c2, #ffffff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c2, #ffffff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
}

@keyframes klbKpjrDotOutlineFlash1 {
    0%, 48% { border-color: var(--special-c1, #ff1744) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c1, #ff1744), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    50%, 98% { border-color: var(--special-bg-base, #ffffff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-bg-base, #ffffff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    100% { border-color: var(--special-c1, #ff1744) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--special-c1, #ff1744), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
}

@keyframes klbKpjrDotOutlineFlashFallback {
    0%, 48% { border-color: var(--train-outline, #ffffff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--train-outline, #ffffff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    50%, 98% { border-color: var(--train-color, #ff1744) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--train-color, #ff1744), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
    100% { border-color: var(--train-outline, #ffffff) !important; box-shadow: 0 0 3px #ffffff, 0 0 8px #ffffff, 0 0 16px var(--train-outline, #ffffff), 0 0 24px rgba(255, 255, 255, 0.7) !important; }
}

/* ==========================================================================
   Heritage Train Smoke Effect (Organic Wisps Trailing Backwards Behind Heading)
   STRICTLY ONLY FOR PASSENGER - HERITAGE TYPE
   ========================================================================== */
.marker-smoke-emitter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 99999;
    overflow: visible;
    transform: translate(-50%, -50%) rotate(calc(var(--loco-heading, var(--loco-fallback-heading, 90deg)) + 180deg));
    transform-origin: center center;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.marker-smoke-emitter.state-stopped {
    transform: translate(-50%, -50%) rotate(0deg) !important;
}

.marker-smoke-emitter.state-moving {
    transform: translate(-50%, -50%) rotate(calc(var(--loco-heading, var(--loco-fallback-heading, 90deg)) + 180deg)) !important;
}

.marker-smoke-emitter .smoke-puff {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    filter: blur(1.5px);
    will-change: transform, opacity;
}

/* Steam Smoke Emitter Puffs - Moving */
.marker-smoke-emitter.smoke-steam .smoke-puff.p1 {
    width: 12px;
    height: 12px;
    border-radius: 43% 57% 68% 32% / 35% 45% 55% 65%;
    animation: steamSmokePuff 1.8s ease-out infinite;
}

.marker-smoke-emitter.smoke-steam .smoke-puff.p2 {
    width: 16px;
    height: 16px;
    border-radius: 65% 35% 40% 60% / 55% 38% 62% 45%;
    animation: steamSmokePuff 1.8s ease-out 0.45s infinite;
}

.marker-smoke-emitter.smoke-steam .smoke-puff.p3 {
    width: 21px;
    height: 21px;
    border-radius: 38% 62% 52% 48% / 48% 65% 35% 52%;
    animation: steamSmokePuff 1.8s ease-out 0.9s infinite;
}

.marker-smoke-emitter.smoke-steam .smoke-puff.p4 {
    width: 26px;
    height: 26px;
    border-radius: 58% 42% 63% 37% / 42% 55% 45% 58%;
    animation: steamSmokePuff 1.8s ease-out 1.35s infinite;
}

/* Steam Smoke Emitter Puffs - Stopped */
.marker-smoke-emitter.state-stopped.smoke-steam .smoke-puff.p1 { animation: steamSmokePuffStopped 1.8s ease-out infinite; }
.marker-smoke-emitter.state-stopped.smoke-steam .smoke-puff.p2 { animation: steamSmokePuffStopped 1.8s ease-out 0.45s infinite; }
.marker-smoke-emitter.state-stopped.smoke-steam .smoke-puff.p3 { animation: steamSmokePuffStopped 1.8s ease-out 0.9s infinite; }
.marker-smoke-emitter.state-stopped.smoke-steam .smoke-puff.p4 { animation: steamSmokePuffStopped 1.8s ease-out 1.35s infinite; }

/* Vintage Diesel Smoke Emitter Puffs - Moving */
.marker-smoke-emitter.smoke-diesel .smoke-puff.p1 {
    width: 12px;
    height: 12px;
    border-radius: 43% 57% 68% 32% / 35% 45% 55% 65%;
    animation: dieselSmokePuff 1.8s ease-out infinite;
}

.marker-smoke-emitter.smoke-diesel .smoke-puff.p2 {
    width: 16px;
    height: 16px;
    border-radius: 65% 35% 40% 60% / 55% 38% 62% 45%;
    animation: dieselSmokePuff 1.8s ease-out 0.45s infinite;
}

.marker-smoke-emitter.smoke-diesel .smoke-puff.p3 {
    width: 21px;
    height: 21px;
    border-radius: 38% 62% 52% 48% / 48% 65% 35% 52%;
    animation: dieselSmokePuff 1.8s ease-out 0.9s infinite;
}

.marker-smoke-emitter.smoke-diesel .smoke-puff.p4 {
    width: 26px;
    height: 26px;
    border-radius: 58% 42% 63% 37% / 42% 55% 45% 58%;
    animation: dieselSmokePuff 1.8s ease-out 1.35s infinite;
}

/* Vintage Diesel Smoke Emitter Puffs - Stopped */
.marker-smoke-emitter.state-stopped.smoke-diesel .smoke-puff.p1 { animation: dieselSmokePuffStopped 1.8s ease-out infinite; }
.marker-smoke-emitter.state-stopped.smoke-diesel .smoke-puff.p2 { animation: dieselSmokePuffStopped 1.8s ease-out 0.45s infinite; }
.marker-smoke-emitter.state-stopped.smoke-diesel .smoke-puff.p3 { animation: dieselSmokePuffStopped 1.8s ease-out 0.9s infinite; }
.marker-smoke-emitter.state-stopped.smoke-diesel .smoke-puff.p4 { animation: dieselSmokePuffStopped 1.8s ease-out 1.35s infinite; }

/* Steam Smoke (Billowing Soft White Steam Clouds) */
.marker-smoke-emitter.smoke-steam .smoke-puff {
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(240, 245, 255, 0.82) 45%, rgba(210, 225, 240, 0.2) 75%, transparent 100%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25)) blur(1.5px);
}

/* Vintage Diesel Smoke (Dark Charcoal Sooty Haze) */
.marker-smoke-emitter.smoke-diesel .smoke-puff {
    background: radial-gradient(circle at 40% 40%, rgba(42, 48, 56, 0.88) 0%, rgba(65, 75, 88, 0.6) 45%, rgba(90, 100, 115, 0.18) 75%, transparent 100%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35)) blur(1.5px);
}

/* Organic Steam Smoke Keyframes - Trailing Backwards Behind Train */
@keyframes steamSmokePuff {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(0.35) rotate(0deg);
    }
    20% {
        opacity: 0.85;
        transform: translate3d(calc(-50% + 4px), -8px, 0) scale(0.85) rotate(35deg);
    }
    60% {
        opacity: 0.55;
        transform: translate3d(calc(-50% - 6px), -22px, 0) scale(1.4) rotate(80deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + 8px), -38px, 0) scale(2.0) rotate(140deg);
    }
}

/* Vintage Diesel Smoke Keyframes - Trailing Backwards Behind Train */
@keyframes dieselSmokePuff {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(0.3);
    }
    20% {
        opacity: 0.88;
        transform: translate3d(calc(-50% + 3px), -8px, 0) scale(0.7);
    }
    60% {
        opacity: 0.55;
        transform: translate3d(calc(-50% - 6px), -22px, 0) scale(1.25);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + 8px), -38px, 0) scale(1.7);
    }
}

/* Stopped Steam Smoke Keyframes - Rising Straight Up */
@keyframes steamSmokePuffStopped {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(0.35) rotate(0deg);
    }
    20% {
        opacity: 0.85;
        transform: translate3d(calc(-50% + 2px), -12px, 0) scale(0.85) rotate(20deg);
    }
    60% {
        opacity: 0.55;
        transform: translate3d(calc(-50% - 3px), -28px, 0) scale(1.4) rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + 4px), -48px, 0) scale(2.0) rotate(90deg);
    }
}

/* Stopped Diesel Smoke Keyframes - Rising Straight Up */
@keyframes dieselSmokePuffStopped {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(0.3);
    }
    20% {
        opacity: 0.88;
        transform: translate3d(calc(-50% + 2px), -12px, 0) scale(0.7);
    }
    60% {
        opacity: 0.55;
        transform: translate3d(calc(-50% - 3px), -28px, 0) scale(1.25);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + 4px), -48px, 0) scale(1.7);
    }
}

/* ==========================================================================
   Heritage Train Vintage Typography (1850-1920 Era) & Subtle Worn Patina
   ========================================================================== */
.train-marker.is-heritage-marker .marker-text,
.train-marker.is-heritage-marker .marker-text .marker-train-name,
.train-marker.is-heritage-marker .marker-text .marker-train-no {
    font-family: 'Playfair Display', 'Cinzel', 'Baskerville', 'Bodoni MT', 'Didot', 'Book Antiqua', 'Palatino Linotype', 'Georgia', 'Century Schoolbook', 'Times New Roman', serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.train-marker.is-heritage-marker .marker-text {
    text-transform: uppercase !important;
    font-variant: small-caps;
    box-shadow: inset 0 0 3px rgba(120, 80, 30, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    outline: 1px dashed rgba(180, 130, 70, 0.55) !important;
    outline-offset: -2.5px !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 2px rgba(120, 80, 30, 0.25);
}

body.dark-mode .train-marker.is-heritage-marker .marker-text {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    outline: 1px dashed rgba(212, 175, 55, 0.4) !important;
    outline-offset: -2.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 2px rgba(212, 175, 55, 0.35);
}

/* Tooltip Header for Heritage Trains */
.custom-tooltip.heritage-tooltip {
    border: 1.5px dashed rgba(180, 130, 70, 0.6) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45), inset 0 0 8px rgba(120, 80, 30, 0.15) !important;
}

.custom-tooltip.heritage-tooltip .tt-title {
    font-family: 'Playfair Display', 'Cinzel', 'Baskerville', 'Bodoni MT', 'Didot', 'Book Antiqua', 'Palatino Linotype', 'Georgia', 'Century Schoolbook', 'Times New Roman', serif !important;
    letter-spacing: 0.5px;
    font-weight: 800;
}

/* --- Hover Tooltip Photo Header Banner & Multi-Photo Slider --- */
.tt-header-photo-wrapper,
.tt-header-slider-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 125px;
    background: #0f172a;
    display: block;
}

.tt-header-photo-wrapper {
    cursor: pointer;
}

.tt-header-photo {
    width: 100%;
    height: 100%;
    max-height: 125px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.tt-header-photo-wrapper:hover .tt-header-photo,
.tt-slider-slide:hover .tt-header-photo {
    transform: scale(1.03);
}

/* --- Multi-Photo Stamformasi Slider Elements --- */
.tt-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.tt-slider-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    cursor: pointer;
}

.tt-slider-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.tt-slider-dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    padding: 2.5px 7px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 9999px;
    pointer-events: auto;
}

.tt-slider-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}

.tt-slider-dot:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: scale(1.15);
}

.tt-slider-dot.active {
    width: 13px;
    border-radius: 4px;
    background: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.7);
}

/* --- Detail Pane Rolling Stock Photo & Aspect Ratio (2.35:1) --- */
.detail-pane-rs-photo-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2.35 / 1;
    overflow: hidden;
    cursor: pointer;
    background: #0f172a;
    display: block;
}

.detail-pane-rs-photo-wrapper.standalone-photo-card {
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    margin: -5px auto 15px auto;
    max-width: 400px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.detail-pane-rs-photo-wrapper.attached-in-special {
    margin: 0;
    border: none;
    border-radius: 0 0 7px 7px;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .detail-pane-rs-photo-wrapper.attached-in-special {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.detail-pane-rs-photo {
    width: 100%;
    height: 100%;
    aspect-ratio: 2.35 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.detail-pane-rs-photo-wrapper:hover .detail-pane-rs-photo {
    transform: scale(1.03);
}

.detail-pane-rs-hauling-pill {
    position: absolute;
    top: 4px;
    left: 6px;
}
.tt-header-photo-hauling {
    position: absolute;
    top: 4px;
    left: 10px;
}
.detail-pane-rs-hauling-pill,
.tt-header-photo-hauling {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    z-index: 3;
    pointer-events: none;
}

/* Bottom-Right Copyright Text Overlay (No container box, flush bottom-right, max 75% width) */
.detail-pane-rs-copyright,
.tt-header-photo-copyright {
    position: absolute;
    bottom: 4px;
    right: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: right;
    z-index: 3;
    pointer-events: none;
}

/* AI Fallback CTA & Badge Highlights */
.detail-pane-rs-hauling-pill.is-ai-cta,
.tt-header-photo-hauling.is-ai-cta {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #fef08a !important;
    letter-spacing: 0.2px;
}
.detail-pane-rs-copyright.is-ai-badge,
.tt-header-photo-copyright.is-ai-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.3px;
}

/* Centered Zoom Hint on Hover */
.detail-pane-photo-zoom-hint,
.tt-header-photo-zoom-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 4;
}

.detail-pane-rs-photo-wrapper:hover .detail-pane-photo-zoom-hint,
.tt-header-photo-wrapper:hover .tt-header-photo-zoom-hint,
.tt-slider-slide:hover .tt-header-photo-zoom-hint {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

/* ==========================================================================
   Rolling Stock Photo Lightbox Modal (Frontend Map Modal Design)
   ========================================================================== */
.aluline-image-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: aluLightboxFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aluLightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.aluline-image-lightbox-dialog {
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    background: var(--glass-bg, rgba(15, 23, 42, 0.92)) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: aluLightboxZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aluLightboxZoomIn {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.alu-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.alu-lightbox-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.alu-lightbox-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #f8fafc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.alu-lightbox-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-sub, #94a3b8);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.alu-lightbox-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    transform: scale(1.06);
}

.alu-lightbox-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    max-height: calc(88vh - 100px);
    overflow: auto;
}

.alu-lightbox-img-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.alu-lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

.alu-lightbox-loader {
    padding: 40px;
    font-size: 24px;
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alu-lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 18px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.alu-lightbox-copyright {
    font-size: 11.5px;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

/* ==========================================================================
   TRACK HAZARDS & CROWDSOURCED VERIFICATION (WAZE-STYLE)
   ========================================================================== */
.aluline-hazard-popup .leaflet-popup-content-wrapper {
    background: transparent !important;
    color: inherit !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
}
.aluline-hazard-popup .leaflet-popup-content {
    margin: 0 !important;
    line-height: inherit !important;
    width: 335px !important;
}
.aluline-hazard-popup .leaflet-popup-tip-container {
    display: none !important;
}
.aluline-hazard-popup a.leaflet-popup-close-button {
    top: 10px !important;
    right: 10px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(148, 163, 184, 0.22) !important;
    color: var(--text-sub, #64748b) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.18s ease !important;
    z-index: 10 !important;
    text-decoration: none !important;
}
.aluline-hazard-popup a.leaflet-popup-close-button:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    transform: scale(1.08) !important;
}

/* Base Card Styling (Light mode defaults) */
.aluline-hazard-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    color: var(--text-main, #0f172a);
}
.aluline-hazard-card .alu-hazard-accent-bar {
    height: 4px;
    width: 100%;
}
.aluline-hazard-card .alu-hazard-inner {
    padding: 12px 14px 14px 14px;
}
.aluline-hazard-card .alu-hazard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-right: 24px; /* Space for close button */
}
.aluline-hazard-card .alu-hazard-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aluline-hazard-card .alu-hazard-pill-badge {
    color: #ffffff;
    padding: 2.5px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.aluline-hazard-card .alu-hazard-corridor-badge {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-sub, #475569);
    letter-spacing: 0.3px;
}
.aluline-hazard-card .alu-hazard-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    line-height: 1.35;
    margin-bottom: 6px;
}
.aluline-hazard-card .alu-hazard-details {
    font-size: 11.5px;
    color: var(--text-sub, #475569);
    line-height: 1.4;
    margin-bottom: 8px;
}
.aluline-hazard-card .alu-hazard-chips-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.aluline-hazard-card .alu-hazard-chip {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-sub, #475569);
}
.aluline-hazard-card .alu-hazard-chip.speed {
    background: rgba(234, 88, 12, 0.12);
    color: #ea580c;
    font-weight: 600;
}
.aluline-hazard-card .alu-hazard-chip.speed strong {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
}
.aluline-hazard-card .alu-hazard-chip.period {
    font-size: 10.5px;
}

/* Verification Box */
.aluline-hazard-card .aluline-hazard-verification-box {
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 10px;
    padding: 10px;
}
.aluline-hazard-card .alu-hazard-verify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.aluline-hazard-card .alu-hazard-verify-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
}
.aluline-hazard-card .alu-hazard-verify-pct {
    font-size: 11px;
    font-weight: 800;
}
.aluline-hazard-card .alu-hazard-progress-track {
    height: 5px;
    width: 100%;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.aluline-hazard-card .alu-hazard-progress-bar {
    height: 100%;
    transition: width 0.3s ease;
}
.aluline-hazard-card .aluline-hazard-status-text {
    font-size: 11px;
    color: var(--text-sub, #475569);
    margin-bottom: 6px;
    line-height: 1.35;
}
.aluline-hazard-card .alu-hazard-verify-prompt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main, #334155);
    margin-bottom: 8px;
}
.aluline-hazard-card .aluline-hazard-vote-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.aluline-hazard-card .aluline-btn-vote-hazard {
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
    transition: all 0.16s ease;
    border: none;
    outline: none;
    white-space: nowrap !important;
    min-width: 0;
    overflow: hidden;
}
.aluline-hazard-card .aluline-btn-vote-hazard span {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aluline-hazard-card .aluline-btn-vote-hazard i {
    flex-shrink: 0;
}
.aluline-hazard-card .aluline-btn-vote-hazard.active-btn {
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}
.aluline-hazard-card .aluline-btn-vote-hazard.active-btn:hover {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}
.aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn {
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
}
.aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: rgba(148, 163, 184, 0.5);
    transform: translateY(-1px);
}
.aluline-hazard-card .aluline-hazard-vote-msg {
    font-size: 11px;
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
}

/* Dark Mode Styling */
body.dark-mode .aluline-hazard-card,
body.dark-theme .aluline-hazard-card,
[data-theme="dark"] .aluline-hazard-card {
    background: rgba(24, 27, 36, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 48px -6px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}
body.dark-mode .aluline-hazard-popup a.leaflet-popup-close-button,
body.dark-theme .aluline-hazard-popup a.leaflet-popup-close-button,
[data-theme="dark"] .aluline-hazard-popup a.leaflet-popup-close-button {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}
body.dark-mode .aluline-hazard-popup a.leaflet-popup-close-button:hover,
body.dark-theme .aluline-hazard-popup a.leaflet-popup-close-button:hover,
[data-theme="dark"] .aluline-hazard-popup a.leaflet-popup-close-button:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}
body.dark-mode .aluline-hazard-card .alu-hazard-corridor-badge,
body.dark-theme .aluline-hazard-card .alu-hazard-corridor-badge,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-corridor-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}
body.dark-mode .aluline-hazard-card .alu-hazard-title,
body.dark-theme .aluline-hazard-card .alu-hazard-title,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-title {
    color: #f8fafc;
}
body.dark-mode .aluline-hazard-card .alu-hazard-details,
body.dark-theme .aluline-hazard-card .alu-hazard-details,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-details {
    color: #cbd5e1;
}
body.dark-mode .aluline-hazard-card .alu-hazard-chip,
body.dark-theme .aluline-hazard-card .alu-hazard-chip,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-chip {
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
}
body.dark-mode .aluline-hazard-card .alu-hazard-chip.speed,
body.dark-theme .aluline-hazard-card .alu-hazard-chip.speed,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-chip.speed {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
}
body.dark-mode .aluline-hazard-card .aluline-hazard-verification-box,
body.dark-theme .aluline-hazard-card .aluline-hazard-verification-box,
[data-theme="dark"] .aluline-hazard-card .aluline-hazard-verification-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .aluline-hazard-card .alu-hazard-verify-title,
body.dark-theme .aluline-hazard-card .alu-hazard-verify-title,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-verify-title {
    color: #94a3b8;
}
body.dark-mode .aluline-hazard-card .alu-hazard-progress-track,
body.dark-theme .aluline-hazard-card .alu-hazard-progress-track,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-progress-track {
    background: rgba(255, 255, 255, 0.1);
}
body.dark-mode .aluline-hazard-card .aluline-hazard-status-text,
body.dark-theme .aluline-hazard-card .aluline-hazard-status-text,
[data-theme="dark"] .aluline-hazard-card .aluline-hazard-status-text {
    color: #cbd5e1;
}
body.dark-mode .aluline-hazard-card .alu-hazard-verify-prompt,
body.dark-theme .aluline-hazard-card .alu-hazard-verify-prompt,
[data-theme="dark"] .aluline-hazard-card .alu-hazard-verify-prompt {
    color: #e2e8f0;
}
body.dark-mode .aluline-hazard-card .aluline-btn-vote-hazard.active-btn,
body.dark-theme .aluline-hazard-card .aluline-btn-vote-hazard.active-btn,
[data-theme="dark"] .aluline-hazard-card .aluline-btn-vote-hazard.active-btn {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #34d399;
}
body.dark-mode .aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn,
body.dark-theme .aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn,
[data-theme="dark"] .aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}
body.dark-mode .aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn:hover,
body.dark-theme .aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn:hover,
[data-theme="dark"] .aluline-hazard-card .aluline-btn-vote-hazard.cleared-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.aluline-hazard-tooltip {
    background: rgba(15, 23, 42, 0.94) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
    font-size: 11.5px !important;
    pointer-events: none;
}
.aluline-hazard-tooltip::before {
    border-top-color: rgba(15, 23, 42, 0.94) !important;
}

/* ==========================================================================
   ALURAIL ENHANCEMENTS: LOGO TOOLTIP, TIPS MODAL, STATION LINK, BENTO MENU
   ========================================================================== */

/* Floating logo tooltip on mobile view */
.mobile-logo-tooltip {
    position: absolute;
    top: 56px;
    left: 20px;
    background: var(--glass-bg, rgba(20, 20, 30, 0.95));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-main, #ffffff);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 1050;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.mobile-logo-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.mobile-logo-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 14px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--glass-border, rgba(255, 255, 255, 0.2));
}

/* Station Details Link Button */
.station-detail-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 132, 199, 0.12);
    color: var(--blue, #0284c7) !important;
    border: 1px solid rgba(2, 132, 199, 0.25);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.station-detail-link-btn:hover {
    background: var(--blue, #0284c7);
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Desktop Bento Directory Menu in Details Panel */
.bento-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 15px;
}

.bento-menu-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.2s ease;
}

.bento-menu-card:hover {
    background: rgba(2, 132, 199, 0.1);
    border-color: var(--blue, #0284c7);
    transform: translateY(-2px);
}

.bento-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(2, 132, 199, 0.15);
    color: var(--blue, #0284c7);
    flex-shrink: 0;
}

/* Tips Modal Styles */
.tip-banner {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.2), rgba(147, 51, 234, 0.2));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.tip-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
}