:root{
  --bg:#111315;
  --panel:#1a1d20;
  --panel-2:#202428;
  --accent:#6ea8ff;
  --text:#ffffff;
  --muted:#b5bcc4;
  --black:#000000;

  /* EUD screen inset */
  --inset-top: 60px;
  --inset-right: 60px;
  --inset-bottom: 60px;
  --inset-left: 60px;

  --border: rgba(0,0,0,0.7);
  --glass: rgba(10,12,14,0.35);
  --glass-strong: rgba(10,12,14,0.55);

  /* pin image (22px) + tip (~6px) */
  --pin-anchor: 28px;
}

html,body{height:100%;margin:0;background:var(--black);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Arial}
.caps{text-transform:uppercase}

.stage{position:fixed;inset:0;display:grid;place-items:center;background:var(--black)}
.eud{position:relative;width:min(96vw,1500px);aspect-ratio:1572/768}
.eud>img.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;z-index:5}

.screen{
  position:absolute;
  inset:var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left);
  display:grid;grid-template-rows:48px 1fr;border-radius:18px;overflow:hidden;
  background:var(--panel);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Top bar */
#topbar{
  display:flex;gap:8px;align-items:center;padding:0 12px;
  background:var(--glass-strong);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);z-index:3
}
.btn{
  height:32px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);
  color:var(--text);cursor:pointer
}
.btn[data-active="true"]{background:var(--accent);border-color:transparent;color:#0a0e12}
.icon{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);cursor:pointer
}
.sep{width:1px;height:24px;background:var(--border);margin:0 6px}
#mode{margin-left:auto;color:var(--muted);font-size:12px}
#callsignBadge{margin-left:8px;font-size:12px;color:#ffffff;background:rgba(255,255,255,.12);padding:2px 8px;border-radius:999px;border:1px solid var(--border)}
.tx{margin-left:12px;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(110,168,255,.15);border:1px solid rgba(110,168,255,.5);color:#e6f0ff}
.hidden{display:none}

/* Sidebar */
#sidebar{
  position:absolute;top:48px;left:0;bottom:0;width:360px;max-width:70%;background:var(--panel);
  border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .25s ease;z-index:3;display:flex;flex-direction:column
}
#sidebar.open{transform:translateX(0)}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tab{flex:1;text-align:center;padding:10px 8px;cursor:pointer;color:var(--muted)}
.tab.active{color:var(--text);border-bottom:2px solid var(--accent)}
.panel{display:none;flex:1;overflow:auto;padding:12px}
.panel.active{display:block}
.section{margin:8px 0 14px}
.section h4{margin:0 0 6px;font-size:12px;letter-spacing:.5px;color:#e4e7eb}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select,button,textarea{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px
}
button.primary{background:var(--accent);border-color:transparent;color:#101418;cursor:pointer}
button.ghost{background:transparent}
.list{display:grid;gap:8px}
.card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px}
.badge{font-size:12px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.08);color:#e9eef5}
.small{font-size:12px;color:var(--muted)}

/* Map */
#map{position:relative;background:var(--panel-2)}
#satLayer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:contrast(1.05) saturate(1.05) brightness(.95)
}
#mapCanvas{position:absolute; inset:0; z-index:1; cursor:grab}

/* Pins: anchor tip to click location */
.pin{
  position:absolute; transform:translateX(-50%); pointer-events:auto; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))
}
.pin img{width:22px;height:22px}
.pin .tip{position:absolute; left:50%; top:18px; width:2px; height:10px; background:#fff; transform:translateX(-50%); opacity:.85}

/* Compass: circular only */
#compass{position:absolute; left:10px; bottom:10px; width:86px; height:86px; z-index:3}
#compass.hidden{display:none}
#compass .rose{
  position:absolute; left:0; top:0; width:86px; height:86px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.5); box-shadow:0 0 10px rgba(0,0,0,.6) inset, 0 0 6px rgba(0,0,0,.4)
}
#compass .needle{
  position:absolute; left:50%; top:10px; width:3px; height:34px; border-radius:3px;
  background:linear-gradient(#e9f1ff,#6ea8ff);
  transform:translateX(-50%);
  box-shadow:0 0 5px rgba(110,168,255,0.9)
}
#compass .tick{position:absolute; color:#fff; font-weight:800; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.9)}
#rose .n{top:-2px;left:50%;transform:translateX(-50%)}
#rose .e{right:-2px;top:50%;transform:translateY(-50%)}
#rose .s{bottom:-2px;left:50%;transform:translateX(-50%)}
#rose .w{left:-2px;top:50%;transform:translateY(-50%)}

/* Toast + Modal */
#toast{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  background:var(--glass-strong); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; display:none; z-index:4; color:#fff
}
#pinModal{position:absolute; inset:0; display:none; place-items:center; background:rgba(0,0,0,.35); z-index:4}
#pinModal .box{width:320px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}

/* PTT */
#ptt{
  position:absolute; right:12px; bottom:12px; width:100px; height:100px; border-radius:999px;
  display:grid; place-items:center; font-weight:800; color:#fff; user-select:none; cursor:pointer; z-index:4;
  background:#b3261e; border:1px solid var(--border); letter-spacing:1px
}
#ptt.active{background:#1f8a36}
#ptt.hidden{display:none}

/* Video tiles */
#videoBar{position:absolute; right:12px; top:64px; display:flex; flex-direction:column; gap:10px; z-index:3}
.videoTile{width:260px; height:146px; border-radius:12px; overflow:hidden; background:#000; border:1px solid var(--border); position:relative}
.videoTile video{width:100%; height:100%; object-fit:cover}
.videoTile .hud{position:absolute; left:8px; top:8px; font-size:11px; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.2)}
.videoTile .badge{position:absolute; right:8px; bottom:8px; font-size:10px; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.2)}

/* highlight selected pin */
.pin.selected img{ outline:3px solid #6ea8ff; outline-offset:2px; border-radius:50% }