* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font: 14px/1.5 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #0f1115; }

/* ---------- 解锁页 ---------- */
.lock {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: radial-gradient(1200px 600px at 50% 0%, #1b2330, #0f1115 70%);
}
.card {
  width: 100%; max-width: 380px; background: #171a21; border: 1px solid #262b36;
  border-radius: 14px; padding: 26px 22px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.logo { font-size: 28px; text-align: center; }
.card h1 { margin: 6px 0 2px; font-size: 20px; text-align: center; color: #eef1f6; font-weight: 600; }
.sub { margin: 0 0 20px; text-align: center; font-size: 12px; color: #8b93a3; }

.primary {
  width: 100%; height: 42px; border: 0; border-radius: 8px; cursor: pointer;
  background: #3385ff; color: #fff; font-size: 15px; margin-top: 10px;
}
.primary:active { background: #2b6fd6; }
.primary:disabled { background: #2a3140; color: #6b7484; cursor: default; }

.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; color: #5d6675; font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: #262b36; }

.lbl { display: block; font-size: 12px; color: #8b93a3; margin: 10px 0 6px; }
#code {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid #2c323f;
  background: #0f1218; color: #dfe4ec; font: 15px/42px Consolas, Menlo, monospace;
  letter-spacing: .5px; outline: none;
}
#code:focus { border-color: #3385ff; }

.msg { min-height: 20px; margin: 12px 0 0; font-size: 12.5px; color: #ff8b7a; word-break: break-all; }
.msg.ok { color: #5fd08a; }
.hint { margin: 6px 0 0; font-size: 11.5px; color: #5d6675; text-align: center; }

/* ---------- 地图页 ---------- */
.app { position: fixed; inset: 0; }
#bar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; display: flex; gap: 8px;
  align-items: center; padding: 0 12px; background: #fff; border-bottom: 1px solid #e3e5e8; z-index: 10;
}
#q { flex: 1; height: 34px; padding: 0 12px; border: 1px solid #d5d8dc; border-radius: 4px; font-size: 14px; outline: none; color: #222; }
#q:focus { border-color: #3385ff; }
#go { height: 34px; padding: 0 18px; border: 0; border-radius: 4px; background: #3385ff; color: #fff; font-size: 14px; cursor: pointer; }
#go:active { background: #2b6fd6; }
#lock-btn { height: 34px; width: 38px; border: 1px solid #d5d8dc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; }
#wrap { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; }
#map { width: 100%; height: 100%; }
#err { position: fixed; top: 52px; left: 0; right: 0; padding: 8px 12px; background: #fff3f3; color: #c0392b;
       font-size: 13px; display: none; z-index: 20; border-bottom: 1px solid #f3c9c9; }

.iw { font: 13px/1.6 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #222; max-height: 320px; overflow: auto; }
.iw h4 { margin: 0 0 6px; font-size: 14px; word-break: break-all; }
.iw .sec + .sec { border-top: 1px dashed #dcdfe3; margin-top: 8px; padding-top: 8px; }
.iw code { display: block; background: #f4f5f7; padding: 4px 6px; border-radius: 3px;
           font: 12px/1.6 Consolas, Menlo, monospace; word-break: break-all; margin: 2px 0; }
.iw a { display: block; color: #2b6fd6; word-break: break-all; text-decoration: none; font-size: 12px; cursor: pointer; }
.iw a:hover { text-decoration: underline; }
.iw .busy { color: #8b93a3; font-size: 12px; }