/* 基礎排版 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* LCP Optimization: Add a placeholder background for the map */
#map {
    background-color: #e2e8f0;
}

.m3-surface {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.maplibregl-popup-content {
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    font-size: 12px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
.maplibregl-popup-tip {
    border-top-color: rgba(255, 255, 255, 0.94) !important;
}

.bus-popup-card { min-width: 200px; color: #1e293b; }
.bus-popup-route { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; }
.bus-popup-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.bus-popup-tag.sim { background: #ede9fe; color: #7c3aed; }
.bus-popup-tag.dir { background: #f1f5f9; color: #475569; }
.bus-popup-plate { margin-top: 5px; font: 700 12px ui-monospace, SFMono-Regular, monospace; color: #475569; }
.bus-popup-plate .speed { color: #2563eb; font-weight: 800; }
.bus-popup-divider { height: 1px; margin: 8px 0; background: #e2e8f0; }
.bus-popup-row3 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #64748b; font-weight: 600; }
.bus-signal-lights { display: flex; gap: 3px; align-items: center; }
.bus-signal-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: #e2e8f0; }
.bus-signal-dot.red.on { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
.bus-signal-dot.yellow.on { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }
.bus-signal-dot.green.on { background: #10b981; box-shadow: 0 0 4px #10b981; }
.bus-signal-countdown { font-family: ui-monospace, monospace; font-weight: 800; color: #475569; }
.bus-popup-row4 { margin-top: 6px; font-size: 11px; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 4px; }
.bus-popup-row4 .label { font-weight: 700; }
.bus-popup-row4 .countdown { font-family: ui-monospace, monospace; font-weight: 800; color: #2563eb; }
.maplibregl-popup { transition: opacity 160ms ease, transform 160ms ease; }
.layer-toggle { accent-color: #2563eb; }

#loadingOverlay { transition: opacity 300ms ease, visibility 300ms ease; }
#loadingOverlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-card { background: rgba(255,255,255,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 55px rgba(15,23,42,.2); }
.loading-bus { animation: loading-breathe 1.5s ease-in-out infinite; }
.loading-bar > span { animation: loading-progress 1.8s ease-in-out infinite; }
@keyframes loading-breathe { 0%,100% { transform: scale(.92); opacity:.65; } 50% { transform: scale(1.08); opacity:1; } }
@keyframes loading-progress { 0% { transform: translateX(-72%); } 55%,100% { transform: translateX(115%); } }

@keyframes pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}
.tracking-pulse { animation: pulse-soft 1.8s infinite ease-in-out; }

/* 紅綠燈 3 格圖示（台灣橫式燈，深綠色薄外殼） */
.signal-dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.4); background: #e5e7eb; transition: all 200ms; display: flex; align-items: center; justify-content: center; }
.signal-dot.red.on { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.9); border-color: #dc2626; }
.signal-dot.yellow.on { background: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.9); border-color: #d97706; }
.signal-dot.green.on { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,0.9); border-color: #059669; }
/* 黃燈格內顯示倒數文字：高對比度白色粗體，無黑邊 */
.signal-countdown-text { font-size: 18px; font-weight: 900; font-family: ui-monospace, monospace; line-height: 1; color: #ffffff; }
.signal-countdown-text.show { display: inline; }
/* 卡片上的倒數數字放大 */
#panelSignalCountdown { font-size: 18px !important; line-height: 1.2; font-weight: 900; font-family: ui-monospace, monospace; }