:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --border: #e3e6ea;
  --text: #1f2328;
  --text-2: #6b7280;
  --brand: #1f6feb;
  --brand-2: #0ea5a5;
  --danger: #d1242f;
  --ok: #1a7f37;
  --shadow: 0 6px 24px rgba(16, 24, 40, .08);
  --radius: 10px;
}

[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1c1f24;
  --panel-2: #22262c;
  --border: #2e333a;
  --text: #e6e8eb;
  --text-2: #9aa3ad;
  --brand: #4d8dff;
  --brand-2: #2fd4c4;
  --shadow: 0 6px 24px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; display: flex; flex-direction: column; }

/* ---------- 顶栏 ---------- */
header.top {
  height: 54px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 1200;
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .3px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 4px rgba(14, 165, 165, .16); }
.brand small { color: var(--text-2); font-weight: 400; }

.stat { display: flex; align-items: baseline; gap: 5px; color: var(--text-2); white-space: nowrap; }
.stat b { color: var(--text); font-size: 15px; }

.spacer { flex: 1 1 auto; }

.btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: .15s;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.icon { width: 32px; text-align: center; padding: 6px 0; }

/* ---------- 主体 ---------- */
main { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

aside.side {
  width: 320px;
  flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 1100;
}
aside.side.hide { display: none; }

.sec { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sec h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-2); font-weight: 600; letter-spacing: .5px; }

input.search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  outline: none;
}
input.search:focus { border-color: var(--brand); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.list { overflow: auto; flex: 1 1 auto; min-height: 0; }
.list .row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.list .row:hover { background: var(--panel-2); }
.list .row.sel { background: rgba(31, 111, 235, .1); }
.list .row .c { font-weight: 600; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; font-size: 13px; }
.list .row .m { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.list .row .t { color: var(--text-2); font-size: 12px; white-space: nowrap; }

#map { flex: 1 1 auto; min-width: 0; height: 100%; background: var(--bg); }

/* ---------- 台站标记 ---------- */
.mk {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1.5px solid var(--brand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .mk { background: rgba(20, 22, 26, .9); }
.mk.k1 { border-color: #b07d00; }
.mk.k2 { border-color: var(--brand-2); }
.mk.k4 { border-color: #8b5cf6; }
.mk.fresh { animation: pop .5s ease-out; }
@keyframes pop { from { box-shadow: 0 0 0 0 rgba(31, 111, 235, .7); } to { box-shadow: 0 0 0 14px rgba(31, 111, 235, 0); } }
/* 移动台航向指向线（从图标中心沿航向伸出，末端带箭头） */
.mk .dir {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 16px; margin-left: -1px; margin-top: -16px;
  background: var(--brand); border-radius: 1px;
  transform-origin: 50% 100%; pointer-events: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, .35);
}
.mk .dir:after {
  content: ''; position: absolute; left: -3px; top: -5px;
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid var(--brand);
}

/* 呼号标签（后台可开关，直接画在图标里，不占用悬停信息卡） */
.mk .lb {
  position: absolute; left: 100%; top: 50%; margin-left: 3px;
  transform: translateY(-50%);
  font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none;
  color: var(--text);
  text-shadow: 0 0 3px var(--panel), 0 0 3px var(--panel), 0 0 3px var(--panel), 0 0 3px var(--panel);
}

/* 鼠标悬停信息卡（紧凑：窄、行少、每行不换行） */
.leaflet-tooltip.aprs-tip {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px 9px; font-size: 12px;
  max-width: 280px; white-space: normal; line-height: 1.55;
}
.leaflet-tooltip.aprs-tip:before { display: none; }
.aprs-tip .tip-h { font-weight: 700; font-size: 13px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, Consolas, monospace; }
.aprs-tip .tip-r { display: flex; gap: 8px; line-height: 1.55; }
.aprs-tip .tip-r.tip-1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aprs-tip .tip-k { color: var(--text-2); flex: 0 0 auto; min-width: 30px; }
.aprs-tip .tip-r.tip-1 .tip-k { display: inline-block; margin-right: 6px; }
.aprs-tip .tip-v { word-break: break-all; }
.aprs-tip .tip-f { margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--border); color: var(--text-2); font-size: 11.5px; }

/* 发信台 → 收信台 连线的箭头与标签 */
.rxarw {
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #ff7a45;
  margin: 2px 0 0 2px;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6));
}
.rxlb {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: #ff7a45;
  background: var(--panel); border: 1px solid #ff7a45; border-radius: 4px;
  padding: 1px 5px; box-shadow: var(--shadow);
}
/* 标签放在端点左侧（箭头朝右时），右边缘对齐端点 */
.rxlb.left { transform: translateX(-100%); }

/* 航空器（ADS-B）图标 */
.ac {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45));
  transition: transform .2s linear;
}
.ac:hover { filter: drop-shadow(0 0 4px rgba(124, 58, 237, .8)); }
.legend i.lg.ac { border-color: #7c3aed; background: #7c3aed; }

/* 船舶（AIS）图标 */
.ship {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45));
  transition: transform .2s linear;
}
.ship:hover { filter: drop-shadow(0 0 4px rgba(13, 148, 136, .85)); }
.legend i.lg.ship { border-color: #0d9488; background: #0d9488; }

/* 卫星（SGP4 星下点）图标 */
.sat {
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
}
.sat.station { filter: drop-shadow(0 0 4px rgba(239, 68, 68, .85)); }
.legend i.lg.sat { border-color: #f59e0b; background: #f59e0b; }

/* 提示气泡（如船舶数据源覆盖范围） */
#toast { position: fixed; right: 18px; bottom: 18px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#toast div {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 13px; font-size: 13px; box-shadow: var(--shadow);
  max-width: 340px;
}

/* ---------- 详情面板 ---------- */
.detail {
  width: 340px; flex: 0 0 auto;
  background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; z-index: 1100;
}
.detail .hd { padding: 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.detail .hd .c { font-size: 17px; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; }
.detail .bd { overflow: auto; padding: 12px; }
.kv { display: grid; grid-template-columns: 78px 1fr; gap: 6px 10px; font-size: 13px; }
.kv .k { color: var(--text-2); }
.kv .v { word-break: break-all; }
.pk { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; padding: 4px 0; border-bottom: 1px dashed var(--border); word-break: break-all; }
.pk time { color: var(--text-2); margin-right: 6px; }

/* ---------- 报文抽屉 ---------- */
.drawer {
  position: absolute; right: 0; bottom: 0; width: 420px; max-width: 100%;
  height: 260px; background: var(--panel); border-left: 1px solid var(--border);
  border-top: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; z-index: 1150;
  transform: translateY(100%); transition: transform .2s;
}
.drawer.open { transform: none; }
.drawer .hd { padding: 8px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.drawer .bd { overflow: auto; padding: 6px 12px; }

.legend {
  position: absolute; left: 344px; bottom: 22px; z-index: 1100;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow);
}
aside.side.hide ~ .legend { left: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.legend i.lg { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--brand); display: inline-block; }
.legend i.lg.k1 { border-color: #b07d00; }
.legend i.lg.k2 { border-color: var(--brand-2); }
.legend i.lg.k4 { border-color: #8b5cf6; }

@media (max-width: 820px) {
  aside.side { position: absolute; top: 0; bottom: 0; left: 0; width: 82%; }
  aside.side.hide { display: none; }
  .detail { position: absolute; top: 0; right: 0; bottom: 0; width: 86%; }
  .legend { display: none; }
  header.top .stat.opt { display: none; }
}

/* 游客体验提示条 */
.guestbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#fff4e5;border-bottom:1px solid #ffd8a8;color:#8a5300;font-size:13px}
.guestbar.soft{background:#eef6ff;border-bottom-color:#cfe4ff;color:#1a4d8f}
.guestbar .gt{flex:1;line-height:1.5}
.guestbar .gbtn{flex:none;background:#1f6feb;color:#fff;text-decoration:none;padding:5px 12px;border-radius:8px;font-size:12.5px;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.guestbar .gbtn:hover{filter:brightness(1.08)}
[data-theme=dark] .guestbar{background:#3a2c14;border-bottom-color:#5a4420;color:#ffd9a0}
[data-theme=dark] .guestbar.soft{background:#152538;border-bottom-color:#24425f;color:#a9cbff}

/* AI 输出块 */
.ai-box{margin:8px 0;padding:9px 11px;border-radius:10px;background:rgba(31,111,235,.06);border:1px solid rgba(31,111,235,.22)}
.ai-h{font-size:12.5px;font-weight:600;color:var(--br,#1f6feb);margin-bottom:4px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ai-meta{font-weight:400;color:var(--text-2,#6b7280);font-size:11.5px}
.ai-t{font-size:13px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
[data-theme=dark] .ai-box{background:rgba(77,141,255,.1);border-color:rgba(77,141,255,.3)}

/* ---------- 赞助弹窗 ---------- */
.sponsor{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1400;padding:16px}
.sponsor .sp-box{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:14px;max-width:420px;width:100%;box-shadow:var(--shadow);max-height:88vh;overflow:auto}
.sponsor .sp-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.sponsor .sp-hd b{flex:1;font-size:15px}
.sponsor .sp-bd{padding:14px}
.sponsor .sp-note{color:var(--text-2);font-size:13px;line-height:1.75;margin:0;white-space:pre-wrap}
.sponsor .sp-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:8px;flex-wrap:wrap}
.sponsor .sp-k{color:var(--text-2);min-width:36px}
.sponsor .sp-addr{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;flex:1 1 160px}
.sponsor .sp-qr{display:block;width:180px;height:180px;margin:10px auto 0;border:1px solid var(--border);border-radius:8px;background:#fff}
.sponsor .hint{color:var(--text-2);font-size:12.5px;line-height:1.7}

/* ---------- 官方 APRS 符号图集（自托管 assets/symbols） ---------- */
.mk.symimg{ background:none; border:0; box-shadow:none; }
.mk.symimg .sy{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; pointer-events:none; }
.mk.symimg .sy.ov{ z-index:2; }
.mk.symimg .lb{ z-index:3; }

/* ---------- 游客限制提示（点被限图层时弹出） ---------- */
.btn .lock{ margin-left:4px; font-size:11px; opacity:.9 }
.gprompt{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1500; padding:16px }
.gprompt .gp-box{ background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:14px; max-width:360px; width:100%; padding:22px 20px; text-align:center; box-shadow:var(--shadow) }
.gprompt .gp-ic{ font-size:30px; line-height:1 }
.gprompt .gp-tt{ font-weight:700; font-size:16px; margin:8px 0 6px }
.gprompt .gp-tx{ color:var(--text-2); font-size:13.5px; line-height:1.75 }
.gprompt .gp-ac{ display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap }
.gprompt .gp-ac .btn{ min-width:124px }

/* ---------- 首页内登录/注册弹窗 ---------- */
.auth{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1600; padding:16px }
.auth .au-box{ background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:14px; max-width:380px; width:100%; box-shadow:var(--shadow); max-height:90vh; overflow:auto }
.auth .au-hd{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border) }
.auth .au-tabs{ display:flex; gap:6px; flex:1 }
.auth .au-t{ border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:8px; padding:6px 14px; cursor:pointer; font-size:13px; font-family:inherit }
.auth .au-t.on{ background:var(--brand); border-color:var(--brand); color:#fff }
.auth .au-bd{ padding:14px }
.auth .au-f{ display:block; margin-bottom:10px }
.auth .au-f span{ display:block; font-size:12.5px; color:var(--text-2); margin-bottom:4px }
.auth .au-f input{ width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:var(--text); font:inherit; outline:none }
.auth .au-f input:focus{ border-color:var(--brand) }
.auth .au-err{ color:var(--danger); font-size:12.5px; margin:6px 0 }
.auth .au-sub{ width:100%; margin-top:6px }
.auth .au-note{ color:var(--ok); font-size:12.5px; line-height:1.7; margin:8px 0 0 }

/* ---------- 用户面板（顶栏用户名右侧下拉） ---------- */
.upanel-wrap{ position:relative; display:inline-flex }
.upanel{ position:absolute; right:0; top:calc(100% + 6px); z-index:1300; min-width:212px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:8px }
.upanel .up-hd{ display:flex; align-items:baseline; gap:8px; padding:6px 8px 4px; font-size:13.5px }
.upanel .up-hd .hint{ color:var(--text-2); font-size:12px }
.upanel .up-bal{ padding:0 8px 8px; color:var(--text-2); font-size:12.5px; border-bottom:1px solid var(--border); margin-bottom:6px }
.upanel .up-bal b{ color:var(--ok); font-size:14px }
.upanel .up-it{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; color:var(--text); text-decoration:none; font-size:13px; background:none; border:0; cursor:pointer; font-family:inherit }
.upanel .up-it:hover{ background:var(--panel-2) }
.upanel .up-it.danger{ color:var(--danger) }

/* ---------- AI 地图操作员 ---------- */
.chip{ border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:20px; padding:3px 10px; font-size:12px; cursor:pointer; font-family:inherit }
.chip:hover{ border-color:var(--brand); color:var(--brand) }
.ai-did{ margin-top:8px; font-size:12.5px; color:var(--text-2); background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:6px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap }
.ai-hl{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center }