*{box-sizing:border-box}
:root{
  --yp-bg:#050816;
  --yp-panel:rgba(7,11,31,.92);
  --yp-panel-soft:rgba(9,14,38,.78);
  --yp-border:rgba(255,255,255,.14);
  --yp-text:#fff;
  --yp-muted:#aeb8e8;
  --yp-accent:#4f7cff;
  --yp-green:#52ffb0;
  --yp-yellow:#ffd43b;
  --yp-red:#ff315f;
  --yp-blue:#2176ff;
}
#youplugs-map-app{
  position:relative;
  width:100%;
  height:calc(100vh - 0px);
  min-height:720px;
  overflow:hidden;
  background:#0b1027;
  color:var(--yp-text);
  font-family:Arial,Helvetica,sans-serif;
  isolation:isolate;
}
#yp-map{
  position:absolute;
  inset:0;
  z-index:1;
  background:#101735;
}
.yp-panel{
  position:absolute;
  z-index:700;
  background:var(--yp-panel);
  border:1px solid var(--yp-border);
  color:white;
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
}
.yp-top{
  top:12px;
  left:12px;
  right:12px;
  padding:10px;
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(120px,.45fr) auto auto auto;
  gap:8px;
  align-items:center;
}
.yp-side{
  top:82px;
  left:12px;
  width:292px;
  padding:12px;
}
.yp-tools{
  top:82px;
  right:12px;
  width:260px;
  padding:12px;
}
.yp-chat{
  left:12px;
  right:12px;
  bottom:12px;
  padding:10px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:10px;
}
.yp-input,.yp-select{
  width:100%;
  min-width:0;
  height:42px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius:13px;
  padding:0 12px;
  outline:none;
  font-size:14px;
}
.yp-select option{color:#111}
.yp-input::placeholder{color:#c4caeb}
.yp-btn{
  height:42px;
  border:0;
  border-radius:13px;
  padding:0 13px;
  color:white;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  background:linear-gradient(135deg,#4f7cff,#8f5cff);
}
.yp-btn:hover{filter:brightness(1.08)}
.yp-btn:active{transform:translateY(1px)}
.yp-btn.secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.yp-btn.taxi{background:linear-gradient(135deg,#ffb900,#ff7a00)}
.yp-btn.emergency{background:linear-gradient(135deg,#ff315f,#1b70ff)}
.yp-btn.danger{background:linear-gradient(135deg,#ff315f,#b00024)}
.yp-title{
  margin:0 0 8px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
}
.yp-stat{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:13px;
}
.yp-stat span:first-child{color:var(--yp-muted)}
.yp-stat b{text-align:right}
.yp-status{
  padding:9px 10px;
  border-radius:13px;
  margin:8px 0;
  font-size:13px;
  line-height:1.35;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
}
.yp-status.ok{border-color:rgba(82,255,176,.35);background:rgba(82,255,176,.11)}
.yp-status.warn{border-color:rgba(255,212,59,.5);background:rgba(255,212,59,.12)}
.yp-status.error{border-color:rgba(255,49,95,.6);background:rgba(255,49,95,.16)}
.yp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.yp-compass{
  width:102px;
  height:102px;
  margin:0 auto 12px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at center,rgba(255,255,255,.14),rgba(255,255,255,.03)),
    linear-gradient(90deg,transparent 48%,rgba(255,255,255,.14) 50%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(255,255,255,.14) 50%,transparent 52%);
  display:grid;
  place-items:center;
  position:relative;
}
.yp-compass:before{content:"N";position:absolute;top:5px;color:white;font-size:12px;font-weight:900}
.yp-compass:after{content:"S";position:absolute;bottom:5px;color:#8d98c9;font-size:12px;font-weight:900}
#yp-compass-arrow{
  width:0;
  height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-bottom:46px solid white;
  transform-origin:50% 70%;
  filter:drop-shadow(0 0 12px #4f7cff);
}
.yp-radar{
  height:145px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at center, transparent 0 23%, rgba(255,255,255,.14) 24% 25%, transparent 26% 49%, rgba(255,255,255,.12) 50% 51%, transparent 52%),
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.13) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.13) 50%, transparent 51%),
    rgba(0,0,0,.24);
}
.yp-radar:after{
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(from 0deg,rgba(79,124,255,0),rgba(79,124,255,.36),rgba(79,124,255,0) 68deg);
  animation:ypSpin 3s linear infinite;
}
@keyframes ypSpin{to{transform:rotate(360deg)}}
.yp-radar-dot{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  z-index:2;
  background:var(--yp-green);
  box-shadow:0 0 12px currentColor;
}
.yp-chat-messages{
  height:126px;
  overflow:auto;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);
  padding:8px;
  font-size:13px;
}
.yp-message{margin:0 0 7px;line-height:1.35}
.yp-message b{color:#9db6ff}
.yp-chat-row{display:grid;grid-template-columns:130px 1fr auto;gap:8px;margin-top:8px}
.yp-selected{
  min-height:126px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  padding:10px;
  color:#cbd3ff;
  font-size:13px;
  line-height:1.45;
}
.yp-you-icon{
  width:28px;
  height:28px;
  background:#4f7cff;
  border:3px solid white;
  border-radius:70% 70% 70% 8%;
  transform:rotate(45deg);
  box-shadow:0 0 24px rgba(79,124,255,.95);
}
.yp-user-icon{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#52ffb0;
  border:2px solid white;
  box-shadow:0 0 18px #52ffb0;
}
.yp-dest-icon{
  width:22px;
  height:22px;
  border-radius:50% 50% 50% 0;
  background:#ffd43b;
  border:3px solid #fff;
  transform:rotate(-45deg);
  box-shadow:0 0 18px #ffd43b;
}
.yp-tooltip{
  background:rgba(7,11,31,.95);
  color:white;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  padding:4px 7px;
}
.yp-alert-taxi .yp-you-icon,.yp-alert-taxi .yp-user-icon{animation:ypTaxi 1s infinite}
.yp-alert-emergency .yp-you-icon,.yp-alert-emergency .yp-user-icon{animation:ypEmergency .55s infinite}
@keyframes ypTaxi{
  0%,100%{background:#ffd43b;box-shadow:0 0 8px #ffd43b}
  50%{background:#ff7a00;box-shadow:0 0 34px #ffd43b}
}
@keyframes ypEmergency{
  0%,100%{background:#ff315f;box-shadow:0 0 30px #ff315f}
  50%{background:#2176ff;box-shadow:0 0 30px #2176ff}
}
.yp-route-loading{
  opacity:.72;
  pointer-events:none;
}
.leaflet-control-container{z-index:650}
.leaflet-top,.leaflet-bottom{z-index:650}
@media(max-width:920px){
  #youplugs-map-app{
    height:100svh;
    min-height:100svh;
  }
  .yp-top{
    top:8px;
    left:8px;
    right:8px;
    grid-template-columns:1fr;
    gap:7px;
    border-radius:16px;
    max-height:44svh;
    overflow:auto;
  }
  .yp-side{
    left:8px;
    right:8px;
    top:auto;
    bottom:250px;
    width:auto;
    padding:10px;
    max-height:230px;
    overflow:auto;
  }
  .yp-tools{
    top:auto;
    right:8px;
    left:8px;
    bottom:132px;
    width:auto;
    display:grid;
    grid-template-columns:112px 1fr;
    gap:10px;
    align-items:start;
    padding:10px;
    max-height:112px;
    overflow:hidden;
  }
  .yp-tools .yp-title{margin-bottom:5px}
  .yp-compass{
    width:82px;
    height:82px;
    margin:0 auto;
  }
  #yp-compass-arrow{
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:36px;
  }
  .yp-radar{height:86px}
  .yp-chat{
    left:8px;
    right:8px;
    bottom:8px;
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
    max-height:118px;
    overflow:auto;
    border-radius:16px;
  }
  .yp-chat-messages{height:62px}
  .yp-selected{display:none}
  .yp-chat-row{
    grid-template-columns:1fr;
  }
  .yp-input,.yp-select,.yp-btn{height:39px;font-size:14px}
  .yp-grid2{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .yp-side{
    bottom:238px;
    font-size:12px;
  }
  .yp-stat{font-size:12px;padding:5px 0}
  .yp-tools{bottom:126px}
  .yp-chat{max-height:112px}
}