html, body { margin: 0; height: 100%; background: #0b1220; font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e5e7eb; }
#map { position: absolute; inset: 0; }

#panel { position: absolute; top: 10px; right: 10px; bottom: 64px; width: 320px; z-index: 1000;
  background: rgba(15, 23, 42, .88); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: transform .25s; }
#panel.collapsed { transform: translateX(290px); }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1f2937; }
.panel-head #stats { flex: 1; color: #94a3b8; font-size: 12px; text-align: right; }
.panel-head button { background: none; border: 0; color: #cbd5e1; font-size: 18px; cursor: pointer; }
#feed { overflow-y: auto; flex: 1; }
.msg { padding: 7px 10px; border-bottom: 1px solid #111827; cursor: pointer; white-space: pre-line; font-size: 13px; }
.msg:hover { background: #1e293b; }
.msg .t { color: #64748b; font-size: 11px; margin-bottom: 2px; display: flex; justify-content: space-between; }
.msg.fix { border-left: 3px solid #f97316; } .msg.shot { border-left: 3px solid #ef4444; }
.msg.danger { border-left: 3px solid #eab308; } .msg.safety { border-left: 3px solid #f59e0b; }
.msg.clear, .msg.rocket_clear { border-left: 3px solid #22c55e; opacity: .75; }
.msg.rocket { border-left: 3px solid #dc2626; } .msg.news { opacity: .5; }
.msg.fresh { animation: flash 1.5s; }
@keyframes flash { from { background: #334155; } to { background: transparent; } }

#bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 44px; z-index: 1000; display: flex; align-items: center;
  gap: 10px; padding: 0 12px; background: rgba(15, 23, 42, .9); border-radius: 10px; }
#bar button, #bar select { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
#bar #live.on { background: #7f1d1d; border-color: #ef4444; }
#slider { flex: 1; accent-color: #f97316; }
#clock { font-variant-numeric: tabular-nums; min-width: 120px; text-align: center; }
#bar label { font-size: 12px; color: #cbd5e1; white-space: nowrap; }

#compass { position: absolute; top: 10px; left: 56px; z-index: 1000; width: 110px; text-align: center;
  background: rgba(15, 23, 42, .85); border-radius: 10px; padding: 6px; }
#compass svg { width: 96px; height: 96px; }
#compass .ring { fill: none; stroke: #334155; stroke-width: 2; }
#compass .n { fill: #64748b; font-size: 11px; text-anchor: middle; }
#compassArrow { fill: #f97316; transition: transform .8s; }
#compassArrow.idle { fill: #334155; }
#compassText { font-size: 12px; color: #cbd5e1; }

.drone { transition: opacity .5s; }
.drone svg { filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.drone .badge { position: absolute; top: -6px; left: 26px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 8px; padding: 0 4px; line-height: 14px; }
.leaflet-tooltip.dt { background: rgba(15,23,42,.95); color: #e5e7eb; border: 1px solid #334155; font-size: 12px; white-space: pre-line; }
.leaflet-control-minimap { border: 2px solid #334155 !important; border-radius: 8px; }

#threats { border-bottom: 1px solid #1f2937; padding: 6px 10px; font-size: 13px; }
#threats:empty { display: none; }
#threats .th { display: flex; justify-content: space-between; padding: 3px 0; cursor: pointer; color: #fde047; }
#threats .th.red { color: #f87171; font-weight: 600; }
.threat { display: flex !important; align-items: center; gap: 3px; width: auto !important; }
.threat .tl { background: rgba(15,23,42,.85); color: #fde047; font-size: 11px; font-weight: 700; padding: 1px 4px; border-radius: 4px; white-space: nowrap; }
.threat .tl.red { color: #fca5a5; }

/* взрывы */
.boom { position: relative; width: 100%; height: 100%; pointer-events: auto; }
.boom b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px;
  animation: boomPulse 1.2s ease-in-out infinite; filter: drop-shadow(0 0 6px #f97316); }
.boom.shot b { font-size: 14px; color: #fff; filter: drop-shadow(0 0 4px #fff); }
.boom i { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; margin: -50% 0 0 -50%; border-radius: 50%;
  border: 3px solid #f97316; animation: boomRing 1.8s ease-out infinite; opacity: 0; }
.boom.infra i { border-color: #ef4444; }
.boom.shot i { border: 2px solid #fff; animation-duration: 1.2s; }
.boom i:nth-child(2) { animation-delay: .6s; } .boom i:nth-child(3) { animation-delay: 1.2s; }
@keyframes boomRing { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes boomPulse { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.2); } }
.msg.impact { border-left: 3px solid #dc2626; background: rgba(127,29,29,.25); opacity: 1; }

/* аэропорты */
.apt { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.apt b { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; border: 1px solid #111; }
.apt.closed b { background: #b91c1c; animation: aptBlink 1.6s ease-in-out infinite; }
.apt.open b { background: #15803d; }
.apt span { background: rgba(15,23,42,.85); color: #e5e7eb; font-size: 11px; padding: 1px 4px; border-radius: 4px; }
@keyframes aptBlink { 50% { box-shadow: 0 0 0 5px rgba(239,68,68,.35); } }
#airports { border-bottom: 1px solid #1f2937; padding: 6px 10px; font-size: 13px; }
#airports:empty { display: none; }
#airports .ap { display: flex; justify-content: space-between; padding: 3px 0; cursor: pointer; color: #fca5a5; }
.msg.airport { border-left: 3px solid #60a5fa; }

/* ---------- мини-апп: моя точка (стиль Apple) ---------- */
.hidden { display: none !important; }
#meBtn { position: absolute; left: 10px; top: 132px; z-index: 1001; width: 44px; height: 44px; border-radius: 50%;
  border: 0; font-size: 20px; cursor: pointer; color: #fff;
  background: rgba(28, 28, 30, .72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 .5px rgba(255,255,255,.15); }
#meBtn:active { transform: scale(.92); transition: transform .12s; }

#meCard { position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%); z-index: 1002;
  width: min(380px, calc(100vw - 24px)); padding: 14px 18px 18px; border-radius: 22px; color: #f5f5f7;
  background: rgba(28, 28, 30, .78); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 48px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.12);
  font: 15px/1.4 -apple-system, system-ui, "SF Pro Text", "Segoe UI", sans-serif;
  animation: cardUp .35s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes cardUp { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#meCard .grab { width: 36px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 auto 10px; }
#meCard h3 { margin: 0 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
#meCard .sub { color: rgba(235,235,245,.6); font-size: 13px; margin: 2px 0; }
#meCard .sub.small { font-size: 11px; margin-top: 10px; }
#meCard .pill { display: block; width: 100%; margin: 12px 0; padding: 12px; border: 0; border-radius: 14px;
  background: #0a84ff; color: #fff; font: 600 16px -apple-system, system-ui, sans-serif; cursor: pointer; }
#meCard .pill:active { opacity: .75; }
#meCard .pill.secondary { background: rgba(255,255,255,.12); }
#meCard .row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 4px; }
#meCard .row b { color: #0a84ff; font-variant-numeric: tabular-nums; }
#meCard input[type=range] { width: 100%; accent-color: #0a84ff; height: 28px; }
#meThreat:not(:empty) { margin-top: 6px; font-size: 14px; color: #fde047; }
#meThreat.red { color: #ff453a; font-weight: 600; }

/* выключатель как в iOS */
.switch { position: relative; width: 51px; height: 31px; display: inline-block; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: rgba(120,120,128,.32); transition: background .25s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.2,.9,.3,1.1); }
.switch input:checked + i { background: #30d158; }
.switch input:checked + i::after { transform: translateX(20px); }

/* маркер «я здесь» — синяя точка с пульсом, как в Картах Apple */
.meDot { position: relative; }
.meDot b { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: #0a84ff; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.meDot i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: rgba(10,132,255,.45); animation: mePulse 2.4s ease-out infinite; }
@keyframes mePulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(3.4); opacity: 0; } 100% { opacity: 0; } }

#mePickHint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1002;
  padding: 10px 18px; border-radius: 20px; color: #fff; font: 600 14px -apple-system, system-ui, sans-serif;
  background: rgba(10,132,255,.92); box-shadow: 0 8px 24px rgba(0,0,0,.4); white-space: nowrap; }
.picking { cursor: crosshair !important; }

/* телефон / окно Telegram */
@media (max-width: 640px) {
  #panel { width: min(320px, 82vw); }
  #bar { height: auto; flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; gap: 8px; scrollbar-width: none; }
  #clock { min-width: 90px; font-size: 12px; }
  #compass { display: none; }
}