*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0b1220;color:#e5e7eb}
header,footer{padding:12px 16px;background:#0f172a;border-bottom:1px solid #1f2937}
footer{border-top:1px solid #1f2937;border-bottom:none;color:#94a3b8}
main{padding:16px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.inline{flex-direction:row;align-items:end;gap:8px}
label{font-size:12px;color:#94a3b8}
input,select,button{padding:10px 12px;border:1px solid #334155;border-radius:8px;background:#0b1220;color:#e5e7eb}
button{background:#2563eb;border-color:#2563eb;cursor:pointer}
button#loadMore{background:#475569;border-color:#475569}
button:disabled{opacity:.5;cursor:not-allowed}
.status{min-height:20px;color:#f59e0b}
.progress{position:relative;height:10px;background:#0f172a;border:1px solid #1f2937;border-radius:999px;overflow:hidden;display:none;margin-top:8px}
.progress .bar{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#2563eb,#38bdf8);width:30%;animation:ind 1.2s infinite}
.progress .text{position:absolute;top:50%;right:8px;transform:translateY(-50%);font-size:12px;color:#cbd5e1}
@keyframes ind{0%{left:-30%}50%{left:40%}100%{left:100%}}
.layout{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.list{background:#0f172a;border:1px solid #1f2937;border-radius:12px;overflow:hidden}
.list h2,.details h2{margin:0;padding:12px 14px;border-bottom:1px solid #1f2937;color:#cbd5e1}
#crossroadList{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
#crossroadList li{border-bottom:1px solid #1f2937}
#crossroadList button{display:flex;width:100%;gap:8px;align-items:center;justify-content:space-between;background:transparent;border:0;border-radius:0;padding:12px 14px}
#crossroadList button:hover{background:#111827}
#crossroadList li.selected > button{background:#1f2937}
.meta{padding:12px 0;color:#94a3b8}
#timingWrap{overflow:auto}
#map{width:100%;height:300px;border:1px solid #1f2937;border-radius:12px;margin-bottom:12px}
#timingTable{width:100%;border-collapse:collapse;border:1px solid #1f2937;border-radius:12px;overflow:hidden}
#timingTable th,#timingTable td{padding:10px 12px;border-bottom:1px solid #1f2937}
#timingTable thead{background:#0f172a}
/* Hide raw value column */
#timingTable td:nth-child(4){display:none}
.active-row {
  background: rgba(34,197,94,0.12);
}
/* Pedestrian signal coloring */
.ped-green td {
  color: #22c55e; /* emerald-500 */
  font-weight: 600;
}
.ped-red td {
  color: #ef4444; /* red-500 */
}
.type-Stsg td{border-left:3px solid #3b82f6}
.type-Ltsg td{border-left:3px solid #f59e0b}
.type-Utsg td{border-left:3px solid #a855f7}
.type-Pdsg td{border-left:3px solid #22c55e}
.type-Bssg td{border-left:3px solid #94a3b8}
.type-Bcsg td{border-left:3px solid #94a3b8}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #334155;color:#cbd5e1}
.time{font-variant-numeric:tabular-nums}
.empty{color:#64748b}