:root{
  --color-white:rgba(255,255,255,1);
  --color-black:rgba(0,0,0,1);
  --color-cream-50:rgba(252,252,249,1);
  --color-cream-100:rgba(255,255,253,1);
  --color-gray-200:rgba(245,245,245,1);
  --color-gray-300:rgba(167,169,169,1);
  --color-gray-400:rgba(119,124,124,1);
  --color-slate-500:rgba(98,108,113,1);
  --color-brown-600:rgba(94,82,64,1);
  --color-charcoal-700:rgba(31,33,33,1);
  --color-charcoal-800:rgba(38,40,40,1);
  --color-slate-900:rgba(19,52,59,1);
  --color-teal-300:rgba(50,184,198,1);
  --color-teal-400:rgba(45,166,178,1);
  --color-teal-500:rgba(33,128,141,1);
  --color-teal-600:rgba(29,116,128,1);
  --color-teal-700:rgba(26,104,115,1);
  --color-red-400:rgba(255,84,89,1);
  --color-red-500:rgba(192,21,47,1);
  --color-orange-400:rgba(230,129,97,1);
  --color-orange-500:rgba(168,75,47,1);
  --color-green-400:rgba(74,222,128,1);
  --color-green-500:rgba(34,197,94,1);
  --color-yellow-400:rgba(250,204,21,1);
  --color-background:var(--color-cream-50);
  --color-surface:var(--color-cream-100);
  --color-text:var(--color-slate-900);
  --color-text-secondary:var(--color-slate-500);
  --color-primary:var(--color-teal-500);
  --color-error:var(--color-red-500);
  --color-success:var(--color-green-500);
  --color-warning:var(--color-orange-500);
  --font-family-base:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --radius-base:8px;
  --radius-lg:12px
}
@media(prefers-color-scheme:dark){
  :root{
    --color-background:var(--color-charcoal-700);
    --color-surface:var(--color-charcoal-800);
    --color-text:var(--color-gray-200);
    --color-text-secondary:var(--color-gray-300);
    --color-primary:var(--color-teal-300)
  }
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-family-base);
  background:var(--color-background);
  color:var(--color-text);
  overflow:hidden
}
.container{display:flex;height:100vh}
.sidebar{
  width:380px;
  background:var(--color-surface);
  border-right:1px solid rgba(94,82,64,.2);
  display:flex;
  flex-direction:column;
  overflow-y:auto
}
.header{
  padding:var(--space-20);
  border-bottom:1px solid rgba(94,82,64,.1)
}
.logo{
  font-size:24px;
  font-weight:600;
  color:var(--color-primary);
  margin-bottom:var(--space-8)
}
.subtitle{font-size:13px;color:var(--color-text-secondary)}
.section{
  padding:var(--space-20);
  border-bottom:1px solid rgba(94,82,64,.1)
}
.section-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--color-text-secondary);
  margin-bottom:var(--space-12);
  letter-spacing:.5px
}
.form-group{margin-bottom:var(--space-16)}
label{
  display:block;
  font-size:13px;
  font-weight:500;
  margin-bottom:var(--space-8);
  color:var(--color-text)
}
select,input{
  width:100%;
  padding:var(--space-12);
  border:1px solid rgba(94,82,64,.2);
  border-radius:var(--radius-base);
  background:var(--color-background);
  color:var(--color-text);
  font-size:14px;
  font-family:inherit
}
select:focus,input:focus{
  outline:none;
  border-color:var(--color-primary)
}
.btn{
  width:100%;
  padding:var(--space-12);
  border:none;
  border-radius:var(--radius-base);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all .2s
}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{
  opacity:.5;
  cursor:not-allowed
}
.btn-secondary{background:var(--color-gray-400);color:#fff}
.btn-secondary:hover:not(:disabled){opacity:.9}
.btn-danger{background:var(--color-red-500);color:#fff}
.btn-danger:hover:not(:disabled){opacity:.9}
.btn-secondary:disabled,.btn-danger:disabled{
  opacity:.5;
  cursor:not-allowed
}
.status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-12)
}
.status-card{
  background:var(--color-background);
  padding:var(--space-12);
  border-radius:var(--radius-base);
  border:1px solid rgba(94,82,64,.1)
}
.status-icon{font-size:18px;margin-bottom:var(--space-8)}
.status-label{
  font-size:11px;
  color:var(--color-text-secondary);
  margin-bottom:4px
}
.status-value{
  font-size:16px;
  font-weight:600;
  color:var(--color-text)
}
.status-detail{
  font-size:11px;
  color:var(--color-text-secondary);
  margin-top:4px
}
.map-container{flex:1;position:relative}
#map{width:100%;height:100%}
.hud{
  position:absolute;
  top:20px;
  right:20px;
  background:var(--color-surface);
  padding:var(--space-16);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  min-width:200px;
  z-index:1000
}
.hud-item{margin-bottom:var(--space-12)}
.hud-item:last-child{margin-bottom:0}
.hud-label{
  font-size:11px;
  color:var(--color-text-secondary);
  margin-bottom:4px
}
.hud-value{
  font-size:20px;
  font-weight:600;
  color:var(--color-text)
}
.progress-bar{
  width:100%;
  height:6px;
  background:rgba(94,82,64,.1);
  border-radius:3px;
  overflow:hidden;
  margin-top:4px
}
.progress-fill{
  height:100%;
  background:var(--color-primary);
  transition:width .3s
}
.instruction-box{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:var(--color-surface);
  padding:var(--space-16) var(--space-24);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  z-index:1000;
  max-width:600px;
  text-align:center
}
.instruction-text{
  font-size:14px;
  color:var(--color-text);
  font-weight:500
}
.traffic-light{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:11px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  position:relative
}
.traffic-light.red{background:var(--color-red-500);animation:none}
.traffic-light.yellow{
  background:var(--color-yellow-400);
  color:var(--color-slate-900);
  animation:none
}
.traffic-light.green{background:var(--color-green-500);animation:none}
.traffic-light.green.override{animation:pulse-green 1.5s infinite}
.traffic-light.green.extended{animation:pulse-green-minimal 2.5s ease-in-out infinite}
.traffic-light.clearing{
  animation:pulse-clearing 1.8s infinite;
  background:var(--color-green-500)
}
@keyframes pulse-green{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.2)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.3)}
}
@keyframes pulse-green-minimal{
  0%,100%{opacity:1}
  50%{opacity:.85}
}
@keyframes pulse-clearing{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.2)}
  50%{box-shadow:0 2px 12px rgba(0,0,0,.35)}
}
.signal-label{
  position:absolute;
  bottom:-24px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  white-space:nowrap;
  background:var(--color-surface);
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:.3px;
  box-shadow:0 1px 3px rgba(0,0,0,.1)
}
.signal-label.override{
  color:var(--color-green-500);
  background:rgba(34,197,94,.1)
}
.signal-label.extended{
  color:var(--color-teal-500);
  background:rgba(33,128,141,.1)
}
.signal-label.clearing{
  color:var(--color-orange-500);
  background:rgba(230,129,97,.15);
  animation:blink-label 1s infinite
}
@keyframes blink-label{
  0%,100%{opacity:1}
  50%{opacity:.8}
}
.signal-popup{
  position:absolute;
  bottom:-60px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--color-green-500),var(--color-teal-500));
  color:#fff;
  padding:8px 16px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  animation:popup-slide .4s ease-out;
  pointer-events:none
}
.signal-popup:before{
  content:'';
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid var(--color-green-500)
}
@keyframes popup-slide{
  0%{transform:translateX(-50%) translateY(10px);opacity:0}
  100%{transform:translateX(-50%) translateY(0);opacity:1}
}
.ambulance-marker{
  width:50px;
  height:50px;
  background:var(--color-red-500);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  box-shadow:0 4px 12px rgba(192,21,47,.4);
  animation:ambulance-pulse 1s infinite
}
@keyframes ambulance-pulse{
  0%,100%{box-shadow:0 4px 12px rgba(192,21,47,.4)}
  50%{box-shadow:0 4px 16px rgba(192,21,47,.5)}
}
.congestion-zone{
  fill:rgba(230,129,97,.3);
  stroke:var(--color-orange-500);
  stroke-width:2;
  animation:congestion-pulse 2s infinite
}
@keyframes congestion-pulse{
  0%,100%{opacity:.3}
  50%{opacity:.4}
}
.alert-banner{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  background:var(--color-orange-500);
  color:#fff;
  padding:var(--space-12) var(--space-24);
  border-radius:var(--radius-base);
  font-size:14px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  z-index:1001;
  display:none
}
.alert-banner.active{
  display:block;
  animation:slide-down .3s ease-out
}
@keyframes slide-down{
  from{transform:translateX(-50%) translateY(-100%);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}
}
.mode-indicator{
  display:inline-block;
  padding:4px 8px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px
}
.mode-standby{
  background:rgba(94,82,64,.1);
  color:var(--color-text-secondary)
}
.mode-active{
  background:rgba(34,197,94,.15);
  color:var(--color-green-500)
}
.mode-clearing{
  background:rgba(230,129,97,.15);
  color:var(--color-orange-500);
  animation:blink-label 1s infinite
}
@media(max-width:768px){
  .sidebar{
    width:100%;
    max-height:50vh
  }
  .container{flex-direction:column}
}