* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04111f; color: #d8e6f3;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; }
body { display: flex; flex-direction: column; }

.top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #0a2238;
  border-bottom: 1px solid #1d4262; flex-wrap: wrap; }
.brand { font-size: 18px; color: #ffd166; letter-spacing: 3px; }
.sub { color: #8fb0c9; }
.top nav { display: flex; gap: 6px; }
.top nav a { color: #8fb0c9; text-decoration: none; padding: 3px 10px; border: 1px solid #2c5b84; border-radius: 4px; }
.top nav a.on { background: #2f7bbf; color: #fff; border-color: #5aa9ff; }
.date { color: #ffd166; }
.ap { color: #7dff8a; }
.grow { flex: 1; }
.acct { color: #8fb0c9; }
.top button, .cbtn { background: #12314f; color: #d8e6f3; border: 1px solid #2c5b84; border-radius: 4px;
  padding: 4px 10px; font: inherit; cursor: pointer; }
.top button:hover, .cbtn:hover:not([disabled]) { background: #1a4268; }
.top button.primary { background: #2f7bbf; color: #fff; border-color: #5aa9ff; }
.cbtn[disabled] { opacity: 0.4; cursor: not-allowed; }
.cbtn.on { background: #2f7bbf; border-color: #5aa9ff; }
.cbtn em { font-style: normal; color: #8fb0c9; margin-left: 6px; font-size: 11px; }

.layout { flex: 1; display: grid; grid-template-columns: 260px 1fr 300px; min-height: 0; }
.left, .right { overflow-y: auto; background: #071a2d; padding: 10px; }
.left { border-right: 1px solid #1d4262; }
.right { border-left: 1px solid #1d4262; }
.card { background: #0c2740; border: 1px solid #1d4262; border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.card h3 { margin: 0 0 6px; font-size: 14px; color: #ffd166; }
.stat { display: flex; justify-content: space-between; padding: 3px 0; }
.stat b { color: #ffd166; font-size: 16px; }
.hint { color: #6f8fa8; font-size: 12px; }
.sub { color: #8fb0c9; font-size: 12px; }
.row-item { padding: 5px 6px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; }
.row-item:hover { background: #10304d; }
.row-item.sel { background: #1d4a70; }
.cmd { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.log div { padding: 3px 0; border-bottom: 1px dashed #15324d; font-size: 12px; }
.obj { padding: 3px 0; }
.obj.done { color: #7dff8a; }

.map-wrap { display: flex; flex-direction: column; min-width: 0; padding: 8px; background: #061a2e; }
.map-head { display: flex; justify-content: space-between; padding: 4px 6px; }
.map-head strong { color: #ffd166; }
#map { flex: 1; width: 100%; height: auto; background: radial-gradient(ellipse at 50% 40%, #0f3a5c, #061a2e);
  border: 1px solid #1d4262; border-radius: 6px; }
#map .route { stroke: #2c5b84; stroke-width: 2; stroke-dasharray: 6 6; }
#map .plan { stroke: #ffd166; stroke-width: 3; }
#map .node circle { fill: rgba(90, 169, 255, 0.12); stroke: #2c5b84; stroke-width: 2; }
#map .node.hl circle { stroke: #7dff8a; fill: rgba(125, 255, 138, 0.18); cursor: pointer; }
#map .node text { fill: #8fb0c9; font-size: 14px; }
#map .base text { font-size: 14px; font-weight: 600; }
#map .base.own text { fill: #5aa9ff; }
#map .base.enemy text { fill: #ff7a6b; }
#map .fleet { cursor: pointer; }
#map .fleet text { font-size: 13px; }
#map .fleet text.sub { fill: #8fb0c9; font-size: 11px; }
#map .fleet.sel text:first-child { text-decoration: underline; }
.legend { color: #6f8fa8; font-size: 12px; padding: 4px 6px; }