.traffic-basic-scene {
  border: 1px solid #c9d9e2;
  border-radius: 18px;
  overflow: hidden;
  background: #eef6fa;
}

.traffic-basic-scene svg { display: block; width: 100%; height: auto; }
.traffic-basic-scene .tb-city rect { fill: #c5d2d8; stroke: #9cafb8; stroke-width: 2; }
.traffic-basic-scene .tb-city rect:nth-child(even) { fill: #b8c9d1; }
.traffic-basic-scene .tb-sidewalk { fill: #cad2d6; stroke: none; }
.traffic-basic-scene .tb-lane { stroke: #e9dc84; stroke-width: 4; stroke-dasharray: 26 18; }
.traffic-basic-scene .tb-stop-line { stroke: #f2f5f7; stroke-width: 7; }
.traffic-basic-scene .tb-shadow,
.traffic-basic-scene .tb-car-shadow { fill: rgba(19, 34, 43, .22); }
.traffic-basic-scene .tb-pole { fill: #49545b; }
.traffic-basic-scene .tb-signal-box { fill: #17232a; stroke: #394950; stroke-width: 4; }
.traffic-basic-scene .tb-lamp { fill: #343d42; stroke: #0e1519; stroke-width: 3; }
.traffic-basic-scene .tb-lamp.red.on { fill: #e94f4f; filter: drop-shadow(0 0 9px rgba(233, 79, 79, .85)); }
.traffic-basic-scene .tb-lamp.yellow.on { fill: #f2c84b; filter: drop-shadow(0 0 9px rgba(242, 200, 75, .85)); }
.traffic-basic-scene .tb-lamp.green.on { fill: #2fbd72; filter: drop-shadow(0 0 9px rgba(47, 189, 114, .85)); }
.traffic-basic-scene .tb-car-body { fill: #315f91; stroke: #173955; stroke-width: 3; }
.traffic-basic-scene .tb-car-roof { fill: #497aa9; stroke: #173955; stroke-width: 3; }
.traffic-basic-scene .tb-car-window { fill: #c9e4f0; }
.traffic-basic-scene .tb-wheel { fill: #1d252a; stroke: #82919a; stroke-width: 2; }
.traffic-basic-scene .tb-car.green { animation: tb-car-pulse 1s ease-in-out infinite alternate; }
.traffic-basic-scene .tb-car.yellow { opacity: .88; }
.traffic-basic-scene .tb-timer-card rect { fill: rgba(19, 42, 54, .92); stroke: #57717d; stroke-width: 2; }
.traffic-basic-scene .tb-timer-card text { fill: #eaf3f6; font-size: 12px; font-weight: 800; }
.traffic-basic-scene .tb-timer-card .tb-time { font-size: 18px; }
.traffic-basic-scene .tb-timer-card.active.green rect { stroke: #2fbd72; stroke-width: 4; }
.traffic-basic-scene .tb-timer-card.active.yellow rect { stroke: #f2c84b; stroke-width: 4; }
.traffic-basic-scene .tb-timer-card.active.red rect { stroke: #e94f4f; stroke-width: 4; }
.traffic-basic-scene .tb-status rect { fill: rgba(18, 37, 47, .95); }
.traffic-basic-scene .tb-status text { fill: #edf5f8; font-size: 11px; font-weight: 800; }
.traffic-basic-scene .tb-status .emergency { fill: #ff8f87; }
.traffic-basic-scene .state-dot { fill: #7c8b92; }
.traffic-basic-scene .state-dot.green { fill: #2fbd72; }
.traffic-basic-scene .state-dot.yellow { fill: #f2c84b; }
.traffic-basic-scene .state-dot.red { fill: #e94f4f; }
.traffic-basic-scene .state-dot.conflict,
.traffic-basic-scene .state-dot.off { fill: #ff765e; }
.traffic-basic-scene .tb-alert rect { fill: rgba(157, 37, 37, .96); }
.traffic-basic-scene .tb-alert text { fill: #fff; font-size: 13px; font-weight: 900; }

@keyframes tb-car-pulse {
  from { transform: translate(438px, 316px); }
  to { transform: translate(452px, 316px); }
}

@media (max-width: 760px) {
  .traffic-basic-scene .tb-timer-card text { font-size: 10px; }
  .traffic-basic-scene .tb-timer-card .tb-time { font-size: 15px; }
  .traffic-basic-scene .tb-status text { font-size: 9px; }
}