styles.css
:root{
  --bg0:#050b18;
  --bg1:#071126;

  --panelA: rgba(10, 20, 44, .62);
  --panelB: rgba(6, 14, 30, .76);

  --borderA: rgba(120,190,255,.16);
  --borderB: rgba(255,255,255,.06);

  --cyan:#6fe7ff;
  --cyan2:#3fb7ff;
  --violet:#7a6dff;

  --text:#eaf2ff;
  --muted:#9fb2cc;
  --muted2:#7f93b3;

  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --shadowSoft: 0 10px 28px rgba(0,0,0,.35);

  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;
  --r20px: 20px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  /* 全屏背景：暗蓝地图风格 + 渐变光晕，替换为你的纹理图片资源 URL 即可 */
  background:
    radial-gradient(1200px 720px at 18% -10%, rgba(63,183,255,.18), transparent 60%),
    radial-gradient(900px 520px at 115% 20%, rgba(122,109,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  background-attachment: fixed;
}

#topbar{
  height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background: linear-gradient(180deg, rgba(6,14,32,.78), rgba(4,10,24,.68));
  border-bottom: 1px solid var(--borderA);
  box-shadow: var(--shadowSoft);
  position: sticky; top:0; z-index:10;
}
.brandTitle{ font-family: Orbitron, Inter, system-ui; font-size: 18px; letter-spacing: 2px; }
.brandSub{ font-size: 11px; color: var(--muted); }

#app{
  height: calc(100% - 62px);
  display:flex;
}
#sidebar{
  width: 410px;
  padding:14px;
  overflow:auto;
  background: linear-gradient(180deg, rgba(6,14,32,.62), rgba(4,10,24,.74));
  border-right: 1px solid var(--borderA);
}
#main{
  flex:1;
  padding:14px;
  display:flex; flex-direction:column; gap:12px; overflow:auto;
}
.card{
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10,22,46,.52), rgba(6,14,32,.66));
  border: 1px solid rgba(120,190,255,.16);
  box-shadow: var(--shadowSoft);
  padding: 14px;
}
.cardTitle{ font-family: Orbitron, Inter, system-ui; font-size: 12px; letter-spacing: 1.2px; margin-bottom: 8px; }
.field{ display:flex; flex-direction:column; gap:6px; font-size:12px; color: rgba(145,170,205,.85); }
field> label{ font-size:9px; }

input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.06);
  background: rgba(3,8,18,.42); color: var(--text); font-size:13px; }
.source{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px;
  border:1px solid rgba(255,255,255,.06); background: rgba(3,8,18,.26); }
.source .name{ font-size:11px; }
.source .tag{ margin-left:auto; font-size:9px; color: rgba(145,170,205,.65); }

#mapFrame{
  height:100%; min-height:320px; border-radius:14px;
  border:1px solid rgba(120,190,255,.14);
  background:
    radial-gradient(1200px 720px at 55% 42%, rgba(12,58,122,.38), rgba(2,8,18,1)),
    url('https://images.unsplash.com/photo-1434030106463-9d6a7f4f7f61?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: 0 0 40px rgba(63,183,255,.25);
  position:relative; overflow:hidden;
}
#mapFrame::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 120px rgba(63,183,255,.15);
  pointer-events:none;
}
@media (max-width: 900px){
  #sidebar{ width: 320px; }
}
@media (max-width: 700px){
  #app{ flex-direction:column; height:auto; }
  #sidebar{ width:100%; height:auto; min-height:200px; }
  #main{ height:auto; }
}