/* ===========================
   DESIGN TOKENS & RESET
=========================== */
:root {
    --bg-from: #0f0c29;
    --bg-mid:  #302b63;
    --bg-to:   #24243e;
    --glass-bg: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.12);
    --glass-hover: rgba(255,255,255,0.10);
    --accent-primary: #7c6efa;
    --accent-secondary: #56cfe1;
    --accent-green: #43d9a2;
    --accent-red: #ff4d6d;
    --accent-amber: #fbbf24;
    --text-primary: #f0f0ff;
    --text-secondary: rgba(240,240,255,0.65);
    --text-muted: rgba(240,240,255,0.38);
    --card-radius: 16px;
    --card-shadow: 0 4px 24px rgba(0,0,0,0.35);
    --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    --font-mono: 'JetBrains Mono', monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
    font-family:'Inter',system-ui,sans-serif;
    background: linear-gradient(135deg,var(--bg-from) 0%,var(--bg-mid) 50%,var(--bg-to) 100%);
    background-attachment:fixed;
    color:var(--text-primary);
    display:flex;flex-direction:column;
    -webkit-font-smoothing:antialiased;
}

/* ===========================
   SCROLLBAR
=========================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); border-radius: 4px; margin-bottom: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; border: 2px solid rgba(0,0,0,0); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.6); }

/* ===========================
   LAYOUT SHELL
=========================== */
.app-shell{display:flex;flex-direction:column;height:100%;height:100dvh;overflow:hidden;}
.top-bar{flex-shrink:0;padding:10px 16px 0;}
.content-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 16px;-webkit-overflow-scrolling:touch;}

/* ===========================
   HEADER SECTION
=========================== */
.header-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}
.header-search {
    flex: 1;
    min-width: 200px;
    max-width: 600px;
    margin: 0 auto;
}
.site-title{
    flex-shrink: 0;
    font-size:clamp(1.1rem,3vw,1.55rem);
    font-weight:800;
    letter-spacing:-0.5px;
    background:linear-gradient(135deg,#fff 0%,var(--accent-secondary) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    white-space:nowrap;
}
.live-clock{
    flex-shrink: 0;
    font-family:var(--font-mono);
    font-size:clamp(0.72rem,2vw,0.92rem);
    color:var(--text-primary);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    padding:5px 12px;
    border-radius:50px;
    white-space:nowrap;
    backdrop-filter:blur(12px);
}

/* ===========================
   WEATHER STRIP
=========================== */
#weather-widget{margin-bottom:8px;}
#wx-main-panel{
    font-family:'Inter',sans-serif;
    font-size:0.88rem;
    display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;
    background:var(--glass-bg);
    backdrop-filter:blur(16px);
    border:1px solid var(--glass-border);
    border-radius:12px;
    padding:7px 14px;
    color:var(--text-primary);
    position:relative;overflow:hidden;
}
#wx-main-panel::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(124,110,250,0.08);pointer-events:none;}
.wx-icon-block{display:flex;align-items:center;gap:8px;padding-right:12px;border-right:1px solid var(--glass-border);white-space:nowrap;}
#wx-icon{font-size:1.8em;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));}
#wx-temp{font-size:1.45em;font-weight:700;line-height:1;}
#wx-icon-desc{font-size:0.65em;opacity:0.7;margin-top:2px;}
.wx-stat{text-align:center;min-width:46px;padding:0 4px;}
.wx-stat-label{font-size:0.58em;opacity:0.55;letter-spacing:0.4px;text-transform:uppercase;}
.wx-stat-value{font-size:1em;font-weight:600;line-height:1.3;}
.wx-stat-sub{font-size:0.58em;opacity:0.6;}
.wx-hum-bar{height:2px;background:rgba(255,255,255,0.12);border-radius:2px;margin-top:2px;overflow:hidden;}
.wx-hum-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:2px;}
.wx-right-block{flex:1;min-width:130px;padding-left:10px;border-left:1px solid var(--glass-border);}
.wx-right-label{font-size:0.58em;opacity:0.55;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:3px;}
#wx-forecast{font-size:0.72em;line-height:1.35;opacity:0.88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#wx-warn-display{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.wx-source{position:absolute;bottom:3px;right:8px;font-size:0.55em;opacity:0.35;display:flex;align-items:center;gap:3px;pointer-events:none;}
.wx-badge{padding:2px 8px;border-radius:20px;white-space:nowrap;font-size:0.82em;font-weight:600;}
.wx-badge-danger{background:rgba(255,77,109,0.18);border:1px solid var(--accent-red);color:#ff4d6d;}
.wx-badge-warning{background:rgba(251,191,36,0.15);border:1px solid var(--accent-amber);color:#fbbf24;}
.wx-badge-info{background:rgba(86,207,225,0.12);border:1px solid var(--accent-secondary);color:var(--accent-secondary);}
.wx-badge-secondary{background:rgba(255,255,255,0.08);border:1px solid var(--glass-border);color:var(--text-secondary);}
.wx-hko-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:4px;font-weight:700;font-size:0.82em;white-space:nowrap;}
.wx-hko-rain-yellow{background:#FFD700;color:#3a2800;border:1px solid #b89a00;}
.wx-hko-rain-red{background:#C0392B;color:#fff;border:1px solid #922b21;}
.wx-hko-rain-black{background:#2c2c2c;color:#fff;border:1px solid #555;}
.wx-hko-thunderstorm{background:#f39c12;color:#2c1200;border:1px solid #c87a00;}
.wx-hko-tc-wrap{display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap;}
.wx-hko-tc-circle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:0.78em;font-weight:800;flex-shrink:0;}
.wx-hko-tc-octagon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);font-size:0.75em;font-weight:800;flex-shrink:0;}
.wx-hko-tc-1{background:#d6eaf8;color:#1a5276;}
.wx-hko-tc-3{background:#fef5c6;color:#6e4c0b;}
.wx-hko-tc-8{background:#e74c3c;color:#fff;}
.wx-hko-tc-10{background:#c0392b;color:#fff;border:3px solid #7b241c;}
.wx-hko-tc-label{font-size:0.8em;opacity:0.9;}

/* ===========================
   VIEW TOGGLE
=========================== */
.view-toggle { display:flex; align-items:center; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:10px; padding:3px; gap:2px; }
.view-btn { background:transparent; border:none; color:var(--text-muted); font-size:0.8rem; font-weight:600; padding:6px 12px; border-radius:8px; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.view-btn:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.view-btn.active { background:var(--accent-primary); color:#fff; box-shadow:0 2px 8px rgba(124,110,250,0.4); }

/* ===========================
   CONTROL NAVBAR
=========================== */
.ctrl-bar{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:12px;
    padding:7px 14px;
    backdrop-filter:blur(16px);
    margin-bottom:8px;
}
.ctrl-brand{font-weight:700;font-size:0.88rem;display:flex;align-items:center;gap:6px;margin-right:8px;}
.ctrl-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1;}
.api-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:50px;font-size:0.72rem;font-weight:600;border:1px solid transparent;transition:var(--transition);}
.api-pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.api-pill.ok{background:rgba(67,217,162,0.12);border-color:rgba(67,217,162,0.3);color:var(--accent-green);}
.api-pill.ok .dot{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);}
.api-pill.err{background:rgba(255,77,109,0.12);border-color:rgba(255,77,109,0.3);color:var(--accent-red);}
.api-pill.err .dot{background:var(--accent-red);box-shadow:0 0 6px var(--accent-red);}
.api-pill.loading{background:rgba(251,191,36,0.10);border-color:rgba(251,191,36,0.28);color:var(--accent-amber);}
.api-pill.loading .dot{background:var(--accent-amber);animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}
.ctrl-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.ctrl-viewport { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.ctrl-content { display: contents; }
.timer-group{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--text-secondary);}
.countdown-val{font-family:var(--font-mono);font-weight:700;color:var(--accent-red);animation:pulse-text 1s infinite;}
@keyframes pulse-text{0%,100%{opacity:1;}50%{opacity:0.5;}}
.update-time-val{font-family:var(--font-mono);color:var(--accent-secondary);font-size:0.72rem;}
.status-txt{font-size:0.68rem;color:var(--accent-green);font-weight:500;}
.ntp-badge{padding:2px 7px;border-radius:50px;font-size:0.65rem;font-weight:600;border:1px solid transparent;}
.detail-btn{background:transparent;border:1px solid var(--glass-border);color:var(--text-muted);font-size:0.7rem;padding:3px 8px;border-radius:6px;cursor:pointer;transition:var(--transition);}
.detail-btn:hover{background:var(--glass-hover);color:var(--text-primary);}
.detail-btn.active{background:rgba(124,110,250,0.2);border-color:var(--accent-primary);color:var(--accent-primary);}
.route-count-pill{background:rgba(124,110,250,0.15);border:1px solid rgba(124,110,250,0.3);color:var(--accent-primary);padding:2px 8px;border-radius:50px;font-size:0.68rem;font-weight:600;}

/* ===========================
   API LOG PANEL
=========================== */
.api-log-panel{
    background:rgba(10,10,30,0.95);
    border:1px solid var(--glass-border);
    border-radius:0 0 12px 12px;
    padding:12px 16px;
    margin-top:-8px;margin-bottom:8px;
    max-height:45vh;overflow-y:auto;
    font-size:0.76rem;
    backdrop-filter:blur(20px);
}
.log-section-title{color:var(--accent-primary);font-weight:700;font-size:0.85rem;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:6px;}
.log-table{width:100%;border-collapse:collapse;}
.log-table th{color:var(--text-muted);font-weight:600;font-size:0.8em;text-align:left;padding:3px 8px;border-bottom:1px solid var(--glass-border);}
.log-table td{color:var(--text-secondary);padding:3px 8px;border-bottom:1px solid rgba(255,255,255,0.03);font-family:var(--font-mono);font-size:0.88em;}
.log-table tr:hover td{background:var(--glass-bg);}
.type-badge{padding:1px 6px;border-radius:4px;font-size:0.8em;font-weight:700;}
.type-kmb{background:rgba(255,77,109,0.18);color:#ff4d6d;}
.type-ctb{background:rgba(67,217,162,0.15);color:var(--accent-green);}
.type-gmb{background:rgba(251,191,36,0.15);color:var(--accent-amber);}
.type-kmb-ctb{background:rgba(124,110,250,0.18);color:var(--accent-primary);}
.log-endpoint{color:var(--text-muted);font-size:0.8em;word-break:break-all;}
.log-ts{color:var(--text-muted);font-size:0.75em;margin-left:4px;}

/* ===========================
   ALERT BANNERS & TICKER
=========================== */
.alert-arrived{
    border-radius:12px;padding:10px 16px;margin-bottom:8px;
    background:linear-gradient(135deg,rgba(255,77,109,0.18),rgba(192,21,47,0.12));
    border:1px solid rgba(255,77,109,0.4);
    font-size:1.2rem;font-weight:500;
    box-shadow:0 0 20px rgba(255,77,109,0.15);
    animation:glow-red-banner 2s ease-in-out infinite;
    max-height: 160px;
    overflow-y: auto;
}
@keyframes glow-red-banner{0%,100%{box-shadow:0 0 20px rgba(255,77,109,0.15);}50%{box-shadow:0 0 30px rgba(255,77,109,0.35);}}
.alert-notice{
    border-radius:12px;padding:10px 16px;margin-bottom:8px;
    background:rgba(251,191,36,0.08);
    border:1px solid rgba(251,191,36,0.3);
    font-size:0.95rem;
    max-height: 160px;
    overflow-y: auto;
}
.notice-text-container { font-size:1.3rem;line-height:1.2; }
.ticker-wrap {
    display: flex; align-items: center; justify-content: flex-start;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 8px;
    margin-bottom: 10px; height: 44px; overflow: visible;
    box-shadow: inset 0 0 10px rgba(251,191,36,0.05);
}
.ticker-wrap.urgent-mode {
    background: linear-gradient(135deg, rgba(255,77,109,0.15), rgba(192,21,47,0.08));
    border: 1px solid rgba(255,77,109,0.4);
    box-shadow: 0 0 15px rgba(255,77,109,0.1);
}
.ticker-header {
    background: transparent; color: var(--accent-amber); font-weight: 800; font-size: 0.95rem;
    padding: 0 10px; height: 100%; display: flex; align-items: center;
    border-right: 1px solid rgba(255,255,255,0.1); white-space: nowrap; flex-shrink: 0;
}
.ticker-header.urgent {
    color: var(--accent-red);
    animation: flash 1.2s infinite alternate;
}
@keyframes glow-red{0%,100%{box-shadow:inset 0 0 10px rgba(255,77,109,0.15);}50%{box-shadow:inset 0 0 20px rgba(255,77,109,0.35);}}
.ticker-viewport {
    flex: 1; height: 100%; overflow: hidden; position: relative;
    padding: 0 10px; display: flex; flex-direction: column; justify-content: flex-start;
}
.ticker-content {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ticker-item {
    height: 44px; display: flex; align-items: center; font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticker-item.type-arrived { color: #fff; font-size: 1.2rem; }
.ticker-item.type-notice { color: var(--text-primary); }
.ticker-count {
    font-size: 0.7rem; color: var(--text-muted); padding: 0 10px;
    font-family: var(--font-mono); font-weight: 600; flex-shrink: 0;
    border-left: 1px solid rgba(255,255,255,0.05); height: 100%; display: flex; align-items: center;
}
.notice-tag{background:var(--accent-amber);color:#1a0;padding:1px 6px;border-radius:4px;font-weight:700;font-size:0.8em;margin-right:6px;}
.text-flash{animation:flash 0.8s infinite;font-weight:900;color:var(--accent-red);margin-right:6px;}
@keyframes flash{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* Status Filter CSS */
body[data-filter="normal"] .route-card-v2[data-status="suspended"] { display: none !important; }
body[data-filter="suspended"] .route-card-v2[data-status="normal"] { display: none !important; }
body[data-filter="normal"] .location-group:not(:has(.route-card-v2[data-status="normal"])) { display: none !important; }
body[data-filter="suspended"] .location-group:not(:has(.route-card-v2[data-status="suspended"])) { display: none !important; }

/* Responsive Visibility */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}

/* ===========================
   ROUTE GRID & LAYOUT
=========================== */
#arrivals-container {
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
#arrivals-container.updating {
    opacity: 0.4;
    transform: scale(0.98);
    filter: blur(2px);
    pointer-events: none;
}
.dashboard-layout { display: flex; flex-direction: column; gap: 20px; }
.location-group { margin-bottom: 12px; }
.location-title { font-size: 1.15rem; font-weight: 800; color: var(--accent-secondary); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 8px; }
.routes-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* Route Card */
.route-card-v2{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--card-radius);
    padding:12px 14px;
    box-shadow:var(--card-shadow);
    backdrop-filter:blur(16px);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:16px; /* increased gap for breathing room */
}
.route-card-v2::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
    opacity:0;transition:var(--transition);
}
.route-card-v2:hover{
    border-color:rgba(124,110,250,0.4);
    transform:translateY(-2px);
    box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 1px rgba(124,110,250,0.2);
}
.route-card-v2:hover::before{opacity:1;}
.route-card-v2.urgent{
    border-color:rgba(255,77,109,0.5);
    animation:pulse-border 1.5s ease-in-out infinite;
}
.route-card-v2.urgent::before{opacity:1;background:linear-gradient(90deg,var(--accent-red),#ff8fa3);}
@keyframes pulse-border{
    0%,100%{box-shadow:0 0 0 0 rgba(255,77,109,0.4);}
    50%{box-shadow:0 0 0 6px rgba(255,77,109,0);}
}

/* Card Header */
.rcard-header{
    display:flex;align-items:center;justify-content:flex-start;gap:12px;
    width: 38%; /* Fixed width to force neat column alignment */
    min-width: 0; /* Crucial for truncation */
}
.route-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:52px;height:36px;padding:0 10px;
    background:var(--accent-primary); /* default */
    border-radius:10px;
    font-weight:800;font-size:1.1rem;color:#fff;
    letter-spacing:-0.5px;
    flex-shrink:0;
    box-shadow:0 3px 12px rgba(124,110,250,0.4);
}
.route-badge.co-kmb { background: #e63946; color: #ffffff; box-shadow:0 3px 12px rgba(230,57,70,0.4); } /* Red */
.route-badge.co-ctb { background: #f5b700; color: #ffffff; box-shadow:0 3px 12px rgba(245,183,0,0.4); } /* Yellow */
.route-badge.co-gmb { background: #2a9d8f; color: #ffffff; box-shadow:0 3px 12px rgba(42,157,143,0.4); } /* Green */
.route-badge.co-lrt { background: #e67e22; color: #ffffff; box-shadow:0 3px 12px rgba(230,126,34,0.4); } /* Orange */
.route-badge.co-hkkf { background: #0077be; color: #ffffff; box-shadow:0 3px 12px rgba(0,119,190,0.4); } /* Ocean Blue */
.route-badge.co-kmb-ctb { background: #7c6efa; color: #ffffff; } /* Purple */
.route-badge.co-mtr-bus { background: #9b59b6; color: #ffffff; box-shadow:0 3px 12px rgba(155,89,182,0.4); } /* MTR Bus */
.route-badge.urgent { box-shadow:0 3px 12px rgba(255,77,109,0.7); animation:pulse-badge 1s infinite alternate; }
@keyframes pulse-badge { 0% { opacity: 1; } 100% { opacity: 0.85; } }
.dest-block{
    flex:1;
    overflow:hidden;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.dest-label{font-size:0.6em;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.dest-name{
    font-size:1.3rem;color:var(--text-secondary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;
}
/* seamless marquee container */
.marquee-container {
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 10s linear infinite;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.stop-chip{font-size:1.3rem;background:rgba(14, 21, 230, 0.07);border:1px solid var(--glass-border);border-radius:20px;padding:4px 10px;color:#ffffff;margin-top:4px;display:inline-block;max-width:100%;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ETA Slots */
.eta-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;min-width:0;}
.eta-slot{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:10px;
    padding:8px 4px;
    text-align:center;
    transition:var(--transition);
}
.slot-label{font-size:1.2rem;color:#F2A9A9;font-weight:600;letter-spacing:0.3px;margin-bottom:4px;display:block;}
.slot-time{
    font-family:var(--font-mono);
    font-size:1.35rem;font-weight:800;line-height:1;
    display:block;margin-bottom:4px;
}
.slot-co{font-size:1.3rem;color:#ffffff;display:block;font-weight:600;}
.slot-remark{font-size:1.3rem;color:var(--accent-amber);margin-top:3px;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-remark .lang-tc, .slot-remark .lang-en { display: inline-block; max-width: 100%; vertical-align: top; }

/* Time states */
.slot-time.arriving{color:#fff;animation:pulse-bright 0.6s infinite;}
.slot-time.soon{color:var(--accent-amber);}
.slot-time.normal{color:var(--text-primary);}
.slot-time.arrived{color:var(--accent-red);animation:flash-alert 1s infinite alternate;}
.slot-time.empty{color:var(--text-muted);}
.slot-time.no-svc{color:var(--text-muted);}
.eta-slot.arriving-slot{background:rgba(255,77,109,0.15);border-color:rgba(255,77,109,0.4);}
.eta-slot.soon-slot{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.3);}
.eta-slot.arrived-slot{background:rgba(255,77,109,0.1);border-color:rgba(255,77,109,0.4);}
.eta-slot.is-timetable {
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.015),
        rgba(255, 255, 255, 0.015) 8px,
        rgba(0, 0, 0, 0.05) 8px,
        rgba(0, 0, 0, 0.05) 16px
    );
    border: 1px dashed rgba(255, 255, 255, 0.15);
    opacity: 0.9;
}

@keyframes pulse-bright{0%,100%{opacity:1;}50%{opacity:0.5;}}
@keyframes flash-alert{
    0% { opacity: 1; text-shadow: 0 0 10px rgba(255, 77, 109, 0.5); }
    100% { opacity: 0.3; text-shadow: 0 0 20px rgba(255, 77, 109, 1); }
}

/* Drag and Drop states */
.route-card-v2[draggable="true"] { cursor: grab; }
.route-card-v2.dragging { opacity: 0.5; transform: scale(0.98); cursor: grabbing; box-shadow: 0 15px 40px rgba(0,0,0,0.5); z-index: 10; }
.route-card-v2.drag-over-top { border-top: 2px dashed var(--accent-primary); }
.route-card-v2.drag-over-bottom { border-bottom: 2px dashed var(--accent-primary); }


/* Status badge inside card */
.svc-badge{
    display:inline-flex;align-items:center;justify-content:center;gap:4px;
    font-size:0.65rem;font-weight:700;padding:4px 10px;border-radius:50px;
    flex-shrink:0;width:auto;min-width:80px;white-space:nowrap;
}
.svc-badge.ok{background:rgba(67,217,162,0.12);border:1px solid rgba(67,217,162,0.3);color:var(--accent-green);}
.svc-badge.limited{background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.3);color:var(--accent-amber);}

/* ===========================
   LOADING OVERLAY
=========================== */
#loading-layer{
    position:fixed;inset:0;
    background:rgba(10,10,30,0.98);
    z-index:9999;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    transition:opacity 0.7s ease;
}
#loading-layer.hidden{opacity:0;pointer-events:none;}
#loading-layer iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.loading-bar-wrap{
    position:absolute;bottom:24px;left:20px;right:20px;
    height:3px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;
}
.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width 0.4s ease;border-radius:3px;}

/* ===========================
   RESPONSIVE
=========================== */
@media(max-width:768px){
    .top-bar{padding:8px 10px 0;}
    .content-area{padding:0 10px 10px;}
    .header-wrap {
        gap: 10px;
    }
    .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
        margin-top: 2px;
    }
    .live-clock {
        margin: 4px auto 0 auto;
        text-align: center;
        width: 100%;
    }
    .ctrl-bar {
        padding: 0; flex-wrap: nowrap; height: 38px; overflow: hidden;
        background: rgba(10, 10, 30, 0.7); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .ctrl-brand {
        background: rgba(255, 255, 255, 0.08); padding: 0 10px; height: 100%;
        margin-right: 0; border-right: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
    }
    .ctrl-viewport {
        flex: 1; height: 100%; overflow: hidden; position: relative; padding: 0 10px; display: block;
    }
    .ctrl-content {
        display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .ctrl-item {
        height: 38px; flex-shrink: 0; flex-wrap: nowrap; overflow: hidden; gap: 8px; justify-content: flex-start;
    }
    .ctrl-right{margin-left:0;gap:8px;}
    .timer-group{flex-wrap:nowrap;}
    .route-card-v2{flex-direction:column;align-items:stretch;gap:6px;padding:8px;}
    .rcard-header{flex-direction:row;align-items:flex-start;margin-bottom:2px;width:100%;}
    .route-badge{height:30px;min-width:44px;font-size:1rem;padding:0 6px;}
    .dest-name{font-size:1.15rem;}
    .stop-chip{font-size:1.1rem;padding:2px 8px;margin-top:2px;}
    .eta-slot{padding:4px 2px;}
    .slot-label{font-size:1rem;margin-bottom:2px;}
    .slot-time{font-size:1.2rem;}
    .slot-co{font-size:1.1rem;}
    .slot-remark{font-size:1.1rem;margin-top:2px;}
    .svc-badge{width:100%;justify-content:flex-start;padding:6px 12px;font-size:0.75rem;}
    .eta-slots{flex:none;}
}
@media(min-width:1024px){
    .top-bar{padding:12px 20px 0;}
    .content-area{padding:0 20px 20px;}
}
/* Safe area for notched phones */
@supports(padding:max(0px)){
    .top-bar{padding-top:max(10px,env(safe-area-inset-top));}
    .content-area{padding-bottom:max(16px,env(safe-area-inset-bottom));}
}

/* ===========================
   KMB STOP BELL BUTTON (HORIZONTAL)
=========================== */
.kmb-bell-container {
    position: relative;
    width: 80px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    margin-right: 6px;
    flex-shrink: 0;
    cursor: pointer;
    animation: float-bell 3s ease-in-out infinite;
}
@keyframes float-bell {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.kmb-bell {
    position: relative;
    background: linear-gradient(180deg, #222 0%, #000 15%, #000 85%, #222 100%);
    border-radius: 6px;
    width: 120px;
    height: 38px; 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    border: 1px solid #111;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 0 4px rgba(255,255,255,0.3);
    outline: none;
    transform: scale(0.65);
    transform-origin: center center;
    transition: transform 0.1s;
    pointer-events: none;
    overflow: hidden;
}
.kmb-bell::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shine-bell 4s infinite;
    pointer-events: none;
    border-radius: 6px;
}
@keyframes shine-bell {
    0%, 15% { left: -100%; }
    35%, 100% { left: 200%; }
}
.kmb-bell-container:active .kmb-bell {
    transform: scale(0.60);
}
.kmb-bell-screw {
    width: 6px; height: 6px;
    background: radial-gradient(circle, #aaa, #444);
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.2);
}
.kmb-bell-zh {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.kmb-bell-en {
    color: #fff;
    font-size: 11px;
    font-family: Arial, sans-serif;
    line-height: 1;
    letter-spacing: 0.5px;
}
.kmb-bell-red {
    background: linear-gradient(135deg, #ff3333 0%, #b30000 100%);
    width: 32px;
    height: 24px;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 5px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.6);
    border: 1px solid #660000;
    transition: all 0.1s;
    animation: bell-glow 2s infinite alternate;
}
@keyframes bell-glow {
    0% { box-shadow: 0 3px 5px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.6); }
    100% { box-shadow: 0 3px 12px rgba(255,51,51,0.8), inset 0 2px 4px rgba(255,255,255,0.8); }
}
.kmb-bell-container:active .kmb-bell-red {
    background: #800000;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.9);
}

/* ===========================
   ONBOARDING TOOLTIP
=========================== */
.kmb-tooltip {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 10px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ff5722, #e64a19);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255,87,34,0.4);
    pointer-events: none;
    animation: tooltip-float 2s ease-in-out infinite;
    z-index: 100;
    letter-spacing: 0.5px;
}
.kmb-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 5px 0 5px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #e64a19;
}
@keyframes tooltip-float {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-4px); }
}

/* LRT Train Length Background & Lines */
.eta-slot.train-1, .eta-slot.train-2 {
    position: relative;
    padding-bottom: 14px;
}
.eta-slot.train-1 {
    background: linear-gradient(to top, rgba(230,126,34,0.12) 0%, transparent 50%);
}
.eta-slot.train-2 {
    background: linear-gradient(to top, rgba(230,126,34,0.18) 0%, transparent 50%);
}
.eta-slot.train-1::after {
    content: '';
    position: absolute;
    bottom: 0; left: 15%; right: 15%; height: 4px;
    background: #e67e22;
    border-radius: 4px 4px 0 0;
    opacity: 0.8;
}
.eta-slot.train-2::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%; height: 4px;
    background: linear-gradient(90deg, #e67e22 48%, transparent 48%, transparent 52%, #e67e22 52%);
    border-radius: 4px 4px 0 0;
    opacity: 0.8;
}

/* Arrived Train Animation */
@keyframes train-driving {
    0% { transform: translateX(0) translateY(0) scale(1); }
    25% { transform: translateX(2px) translateY(-1px) scale(1.05); }
    50% { transform: translateX(0) translateY(1px) scale(1); }
    75% { transform: translateX(-2px) translateY(-1px) scale(1.05); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}
.train-driven-anim {
    animation: train-driving 1.2s infinite ease-in-out;
    transform-origin: center bottom;
}