:root{
      --bg:#0b0f14;
      --panel:#0f1620;
      --text:#e6edf3;
      --muted:#9fb0c0;
      --line:#223042;
      --good:#66d17a;
      --warn:#f5c542;
      --bad:#ff6b6b;
      --adsb:#00d4ff;
      --adsb-heli:#ff9500;
      --ais:#7dffcd;
      --rid:#ff7ad9;

      --radius:12px;
      --pad:12px;
      --gap:12px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background:var(--bg);
      color:var(--text);
    }

    header{
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      display:flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      position: sticky;
      top: 0;
      background: rgba(11,15,20,0.92);
      backdrop-filter: blur(8px);
      z-index: 5;
    }
    header h1{
      margin:0;
      font-size: 16px;
      letter-spacing: .6px;
      line-height: 1.2;
    }
    #statusLine{
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .brand {
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 240px;
    }
    .brand .subtitle{
      color: var(--muted);
      font-size: 12px;
      margin: 0;
      line-height: 1.2;
    }
    .brand .subtitle a{
      color: var(--adsb);
      text-decoration: none;
    }
    .brand .subtitle a:hover{
      text-decoration: underline;
    }
    .brandText{
      display:flex;
      flex-direction: column;
      gap: 2px;
    }

    .backlink{
      text-decoration:none;
      color: var(--muted);
      font-size: 13px;
      border:1px solid var(--line);
      padding:4px 8px;
      border-radius:6px;
      background: rgba(19,34,53,0.25);
    }
    .backlink:hover{ filter: brightness(1.12); }

    .wrap{
      padding: var(--gap);
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--gap);
      align-items: start;
      min-height: calc(100vh - 56px);
      position: relative;
      z-index: 1;
    }

    .panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: 0 6px 18px rgba(0,0,0,0.22);
      position: relative;
      z-index: 1;
    }

    /* Map panel */
    #map{
      height: calc(100vh - 190px);
      min-height: 420px;
      width: 100%;
    }

    .controls{
      padding: 10px 12px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      border-top: 1px solid var(--line);
    }
    .controls label{
      font-size: 12px;
      color: var(--muted);
      display:flex;
      gap: 8px;
      align-items: center;
      user-select: none;
    }
    .controls input[type="checkbox"]{
      width: 18px;
      height: 18px;
      accent-color: #274a74;
    }

    .controls input[type="number"], .controls input[type="text"]{
      background:#0a121b;
      border:1px solid var(--line);
      border-radius: 10px;
      padding: 9px 10px;
      color: var(--text);
      font-size: 14px;
      outline: none;
    }
    .controls input[type="number"]{ width: 96px; }
    .controls input[type="text"]{ width: min(260px, 80vw); }

    button{
      background:#132235;
      border:1px solid var(--line);
      border-radius: 10px;
      color: var(--text);
      padding: 9px 12px;
      cursor:pointer;
      font-size: 14px;
      touch-action: manipulation;
    }
    button:hover{ filter: brightness(1.12); }

    /* Right side */
    .right{
      display:flex;
      flex-direction: column;
      gap: var(--gap);
      min-width: 320px;
    }

    .stats{
      padding: 12px;
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .statbox{
      border:1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
    }
    .statbox .k{ color:var(--muted); font-size: 12px; }
    .statbox .v{ font-size: 20px; margin-top: 2px; font-weight: 650; }
    .statbox .small{ color:var(--muted); font-size: 11px; margin-top: 4px; }

    .tableWrap{
      display:flex;
      flex-direction: column;
      min-height: 420px;
      height: calc(100vh - 190px);
    }

    .tableHeader{
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .tableHeader .meta{ color: var(--muted); font-size: 12px; }
    .err{ color: var(--bad); font-size: 12px; }

    .scroll{ overflow:auto; flex:1; }

    table{
      width:100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    thead th{
      position: sticky;
      top: 0;
      background:#0b1726;
      border-bottom:1px solid var(--line);
      padding: 10px 8px;
      text-align:left;
      color: var(--muted);
      font-weight: 650;
      z-index: 1;
    }
    tbody td{
      border-bottom: 1px solid rgba(34,48,66,0.55);
      padding: 10px 8px;
      vertical-align: top;
    }
    tbody tr:hover{ background: rgba(255,255,255,0.03); }

    .pill{
      display:inline-block;
      padding: 2px 10px;
      border-radius: 999px;
      border:1px solid var(--line);
      font-weight: 700;
      letter-spacing: .2px;
      font-size: 12px;
    }
    .pill.adsb{ color: var(--adsb); }
    .pill.ais{ color: var(--ais); }
    .pill.rid{ color: var(--rid); }

    .muted{ color: var(--muted); }
    .small{ font-size: 11px; }

    /* Legend */
    .legend{
      padding: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      border-top: 1px solid var(--line);
    }
    .legend-title{
      font-size: 12px;
      color: var(--muted);
      font-weight: 650;
      margin-right: 8px;
    }
    .legend-item{
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text);
    }
    .legend-color{
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid;
      background: transparent;
    }
    .legend-color.adsb{ border-color: var(--adsb); }
    .legend-color.adsb-heli{ border-color: var(--adsb-heli); }
    .legend-color.ais{ border-color: var(--ais); }
    .legend-color.rid{ border-color: var(--rid); }

    /* --- Mobile: stack, map smaller, table becomes cards --- */
    @media (max-width: 980px){
      .wrap{
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .right{ min-width: auto; }
      #map{
        height: 52vh;
        min-height: 320px;
      }
      .tableWrap{
        height: auto;
        min-height: 320px;
      }
    }

    @media (max-width: 640px){
      header{
        padding: 10px 12px;
      }
      header h1{ font-size: 15px; }
      #statusLine{ font-size: 11px; }

      .controls{
        gap: 8px;
      }
      .controls label{
        font-size: 12px;
      }
      .controls input[type="text"]{
        width: 100%;
      }

      .legend{
        padding: 10px 12px;
        gap: 8px;
      }
      .legend-title{
        width: 100%;
        margin-bottom: 4px;
      }
      .legend-item{
        font-size: 11px;
      }

      .stats{
        grid-template-columns: 1fr;
      }

      /* Hide table, show cards */
      table{ display:none; }

      .cards{
        display:flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
      }
      .card{
        border: 1px solid rgba(34,48,66,0.75);
        border-radius: 12px;
        padding: 10px;
        background: rgba(10,18,27,0.35);
      }
      .cardTop{
        display:flex;
        align-items:flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .cardTitle{
        font-weight: 700;
        font-size: 14px;
        line-height: 1.25;
      }
      .cardSub{
        margin-top: 2px;
        font-size: 11px;
        color: var(--muted);
        word-break: break-word;
      }
      .cardGrid{
        margin-top: 8px;
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        font-size: 12px;
      }
      .kv .k{
        color: var(--muted);
        font-size: 11px;
        margin-bottom: 2px;
      }
      .kv .v{
        font-variant-numeric: tabular-nums;
      }
    }