@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
    html, body { height: 100%; margin: 0; background: #0b0f12; color: #aaf3c6; font-family: 'Share Tech Mono', monospace }
    #map { position: absolute; inset: 0 }
    #ui { position: fixed; top: 16px; left: 16px; z-index: 1000; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #1f3b2c transparent }
    #ui::-webkit-scrollbar { width: 6px }
    #ui::-webkit-scrollbar-track { background: transparent }
    #ui::-webkit-scrollbar-thumb { background: #1f3b2c; border-radius: 6px }
    #ui::-webkit-scrollbar-thumb:hover { background: #00ffa244 }
    .panel { background: rgba(10,14,18,0.85); border: 1px solid #1b2b21; box-shadow: 0 0 18px #00ff8877; backdrop-filter: blur(6px); padding: 12px; border-radius: 10px }
    .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
    label { width: 140px; color: #6fffb2 }
    input, select, button { background: #0f1418; color: #b7ffdf; border: 1px solid #1f3b2c; border-radius: 6px; padding: 6px 8px }
    button { cursor: pointer; transition: 0.2s; box-shadow: 0 0 12px #00ff8877 }
    button:hover { box-shadow: 0 0 18px #00ff88aa }
    .buttons { gap: 10px }
    .stats { margin-top: 8px }
    .bar { width: 240px; height: 12px; background: #0a0e12; border: 1px solid #163324; border-radius: 10px; box-shadow: inset 0 0 10px #00ff8877; margin-bottom: 6px }
    .bar .fill { height: 100%; width: 0%; background: linear-gradient(90deg,#00ffa2,#0ff); box-shadow: 0 0 12px #00ffa288; border-radius: 10px }
    .bar.red { box-shadow: inset 0 0 10px #ff004477; border-color: #3a0e14 }
    .bar.red .fill { background: linear-gradient(90deg,#ff0044,#ff8800); box-shadow: 0 0 12px #ff004488 }
    .bar.blue { box-shadow: inset 0 0 10px #00b0ff77; border-color: #0e263a }
    .bar.blue .fill { background: linear-gradient(90deg,#00b0ff,#00ffd9); box-shadow: 0 0 12px #00b0ff88 }
    .text { margin-top: 8px; color: #8af0c5 }
    .text#loss { color: #ffb3c0 }
    .tag { color: #aaf3c6; background: rgba(0,0,0,0.4); border: 1px solid #1b2b21; border-radius: 6px; padding: 2px 4px; box-shadow: 0 0 10px #00ff8877; font-size: 12px }
    .neon-green { filter: drop-shadow(0 0 6px #00ffa2) drop-shadow(0 0 12px #00ffa2) }
    .neon-red { filter: drop-shadow(0 0 6px #ff0044) drop-shadow(0 0 12px #ff0044) }
    .neon-blue { filter: drop-shadow(0 0 6px #00b0ff) drop-shadow(0 0 12px #00b0ff) }
    .tabs { display: flex; gap: 8px; margin-bottom: 8px }
    .tab-btn { background: #0f1418; color: #b7ffdf; border: 1px solid #1f3b2c; border-radius: 6px; padding: 6px 10px; cursor: pointer }
    .tab-btn.active { box-shadow: 0 0 12px #00ffa288; border-color: #00ffa2 }
    .hidden { display: none }
    #startOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000 }
    .overlay-card { background: #0b1114; border: 1px solid #1f3b2c; border-radius: 10px; padding: 20px; width: 420px; box-shadow: 0 0 24px #00ffa244 }
    .overlay-title { font-size: 18px; color: #b7ffdf; margin-bottom: 10px }
    .overlay-text { font-size: 14px; color: #93cbb3; margin-bottom: 16px }
    .overlay-actions { display: flex; justify-content: center }
    .overlay-btn { background: #00ffa2; color: #00110a; border: none; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer }
    .section-title { margin-top: 10px; color: #6fffb2; font-weight: 600 }
    .section-sub { margin: 6px 0; color: #6fffb2 }
    .analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
    .subcol { display: flex; flex-direction: column; gap: 8px }
    .list { max-height: 160px; overflow: auto; border: 1px solid #1f3b2c; border-radius: 8px; padding: 6px }
    .list-item { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #1f3b2c }
    .list-item:last-child { border-bottom: none }
    .table-wrap { max-height: 160px; overflow: auto; border: 1px solid #1f3b2c; border-radius: 8px }
    .table { width: 100%; border-collapse: collapse; color: #b7ffdf }
    .table th, .table td { padding: 6px 8px; border-bottom: 1px solid #163324; font-size: 12px }
    .table thead { position: sticky; top: 0; background: #0f1418 }
    @media (max-width: 920px) { .analysis { grid-template-columns: 1fr } }

    /* ===== Toolbar ===== */
    #toolbar { position: fixed; top: 16px; right: 16px; z-index: 1001; display: flex; gap: 8px; align-items: center }
    #toolbar button, #toolbar select { background: rgba(10,14,18,0.9); color: #b7ffdf; border: 1px solid #1f3b2c; border-radius: 8px; padding: 8px 12px; cursor: pointer; backdrop-filter: blur(6px); font-size: 14px; box-shadow: 0 0 12px #00ff8844; font-family: 'Share Tech Mono', monospace }
    #toolbar button:hover, #toolbar select:hover { box-shadow: 0 0 18px #00ff88aa; border-color: #00ffa2 }
    #toolbar select { padding: 8px }

    /* ===== Mission Timer ===== */
    #missionTimer { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1001; background: rgba(10,14,18,0.9); border: 1px solid #1f3b2c; border-radius: 10px; padding: 10px 24px; color: #00ffa2; font-size: 22px; font-family: 'Share Tech Mono', monospace; box-shadow: 0 0 18px #00ff8855; backdrop-filter: blur(6px); letter-spacing: 3px }

    /* ===== Drone Detail Panel ===== */
    #droneDetail { position: fixed; top: 80px; right: 16px; z-index: 1001; background: rgba(10,14,18,0.92); border: 1px solid #1f3b2c; border-radius: 10px; padding: 0; width: 240px; box-shadow: 0 0 18px #00ff8855; backdrop-filter: blur(6px); display: none }
    .detail-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #1f3b2c; color: #b7ffdf; font-size: 14px }
    .detail-header button { background: none; border: none; color: #ff0044; font-size: 16px; cursor: pointer; box-shadow: none; padding: 2px 6px }
    .detail-body { padding: 10px 12px; font-size: 13px }
    .detail-body div { margin-bottom: 5px; color: #8af0c5 }
    .detail-body span { color: #b7ffdf; font-weight: 600 }
    .detail-bar { margin-top: 8px; width: 100% }

    /* ===== Minimap Radar ===== */
    #minimap { position: fixed; bottom: 16px; right: 16px; z-index: 1001; background: rgba(10,14,18,0.92); border: 2px solid #1f3b2c; border-radius: 50%; width: 176px; height: 176px; overflow: hidden; box-shadow: 0 0 24px #00ff8844, inset 0 0 20px rgba(0,255,162,0.05); display: flex; align-items: center; justify-content: center }
    .minimap-title { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: rgba(0,255,162,0.6); font-size: 10px; letter-spacing: 4px; z-index: 2; font-family: 'Share Tech Mono', monospace }
    #radarCanvas { border-radius: 50%; width: 160px; height: 160px }

    /* ===== Toast Notifications ===== */
    #toastContainer { position: fixed; bottom: 210px; right: 16px; z-index: 1002; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; max-width: 300px }
    .toast { background: rgba(10,14,18,0.95); border: 1px solid #1f3b2c; border-radius: 8px; padding: 10px 16px; color: #b7ffdf; font-size: 13px; font-family: 'Share Tech Mono', monospace; box-shadow: 0 0 12px #00ff8844; backdrop-filter: blur(6px); animation: toastSlideIn 0.3s ease-out; pointer-events: auto; word-break: break-word }
    .toast-error { border-color: #ff0044; box-shadow: 0 0 14px #ff004455; color: #ffb3c0 }
    .toast-warning { border-color: #ffd400; box-shadow: 0 0 14px #ffd40055; color: #ffe680 }
    .toast-success { border-color: #00ffa2; box-shadow: 0 0 14px #00ffa255 }
    .toast-fade { opacity: 0; transition: opacity 0.6s ease-out }
    @keyframes toastSlideIn { from { transform: translateX(120px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

    /* ===== Weather Overlay ===== */
    #weatherOverlay { position: fixed; inset: 0; pointer-events: none; z-index: 998; display: none }
    .weather-rain { display: block !important; background: repeating-linear-gradient(100deg, transparent 0%, transparent 92%, rgba(100,150,255,0.04) 92%, rgba(100,150,255,0.04) 100%); animation: rainAnim 0.3s linear infinite }
    .weather-fog { display: block !important; background: radial-gradient(ellipse at 50% 60%, rgba(180,200,220,0.12) 0%, rgba(180,200,220,0.06) 40%, transparent 75%) }
    .weather-storm { display: block !important; background: rgba(0,0,0,0.18); animation: stormFlash 2.5s ease-in-out infinite }
    @keyframes rainAnim { from { background-position: 0 0 } to { background-position: -30px 60px } }
    @keyframes stormFlash { 0%,88%,100% { opacity: 1 } 90%,92% { opacity: 0.2 } 94% { opacity: 0.9 } }

    /* ===== Charging Station Pulse ===== */
    .charge-station { animation: chargePulse 2s ease-in-out infinite }
    @keyframes chargePulse { 0%,100% { filter: drop-shadow(0 0 4px #00b0ff) } 50% { filter: drop-shadow(0 0 16px #00b0ff) drop-shadow(0 0 30px #00b0ff44) } }

    /* ===== New Controls ===== */
    .separator { height: 1px; background: #1f3b2c; margin: 8px 0; box-shadow: 0 0 4px #00ff8833 }
    .range-val { color: #00ffa2; font-size: 12px; min-width: 42px; text-align: right }
    .speed-btns { display: flex; gap: 4px }
    .speed-btn { padding: 4px 10px !important; font-size: 12px !important; min-width: 36px; text-align: center; transition: 0.2s }
    .speed-btn.active { background: #00ffa2 !important; color: #00110a !important; border-color: #00ffa2 !important; box-shadow: 0 0 14px #00ffa266 !important }
    .btn-emergency { background: #1a0008 !important; color: #ff4466 !important; border: 1px solid #ff0044 !important; box-shadow: 0 0 14px #ff004455 !important; font-weight: 700; width: 100%; font-size: 14px; padding: 8px 12px !important }
    .btn-emergency:hover { box-shadow: 0 0 22px #ff0044aa !important; background: #2a0011 !important }

    /* ===== Live Stats ===== */
    #liveStats { position: fixed; bottom: 16px; left: 16px; z-index: 1001; display: flex; gap: 12px; background: rgba(10,14,18,0.9); border: 1px solid #1f3b2c; border-radius: 8px; padding: 8px 16px; backdrop-filter: blur(6px); box-shadow: 0 0 12px #00ff8833; font-size: 12px; font-family: 'Share Tech Mono', monospace }
    #liveStats span { color: #6fffb2 }
    #statCommLost.lost { color: #ff0044; animation: commBlink 0.8s ease-in-out infinite }
    @keyframes commBlink { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

    /* ===== No-Fly Zone ===== */
    .nofly-zone { fill-opacity: 0.15; stroke-dasharray: 8 4 }
    .comm-range-circle { fill: none !important; stroke-dasharray: 6 3 }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      #minimap { width: 130px; height: 130px }
      #radarCanvas { width: 120px; height: 120px }
      #droneDetail { width: 200px; top: 60px }
      #missionTimer { font-size: 16px; padding: 8px 14px }
      #toolbar { top: auto; bottom: 16px; right: 50%; transform: translateX(50%); flex-wrap: wrap; justify-content: center }
    }