* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif; color: #0f172a; }
body { display: flex; }
.panel {
  width: 320px; flex-shrink: 0; overflow: auto; background: #f8fafc;
  border-right: 1px solid #e2e8f0; padding: 16px 16px 32px;
}
.map-wrap { flex: 1; height: 100%; min-height: 100vh; position: relative; }
#map { width: 100%; height: 100%; min-height: 100vh; position: relative; background: #e2e8f0; }
#drawMask {
  position: absolute; inset: 0; z-index: 8; cursor: crosshair;
  background: transparent; pointer-events: auto;
}
#drawMask[hidden] { display: none !important; }
button.active-draw { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.map-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #475569; font-size: 14px; line-height: 1.8; padding: 24px; pointer-events: none;
}
h1 { font-size: 18px; margin: 0 0 8px; }
h2 { font-size: 13px; margin: 16px 0 8px; color: #1d4ed8; letter-spacing: 0.04em; }
section { border-top: 1px solid #e2e8f0; padding-top: 4px; }
label { display: block; font-size: 13px; margin: 6px 0; }
input[type="text"], input[type="number"], input[type="datetime-local"], input[type="file"], select {
  width: 100%; margin-top: 4px; padding: 4px 6px;
}
button {
  border: 1px solid #93c5fd; background: #fff; color: #1d4ed8;
  padding: 6px 8px; font-size: 12px; cursor: pointer;
}
button.primary { background: #1d4ed8; color: #fff; border-color: #1d4ed8; width: 100%; margin-top: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.warn { font-size: 12px; color: #9a3412; background: #fff7ed; padding: 8px; line-height: 1.5; }
.home-link { margin: 0 0 10px; font-size: 12px; }
.home-link a { color: #64748b; text-decoration: none; }
.home-link a:hover { color: #1d4ed8; text-decoration: underline; }
.status { font-size: 12px; padding: 8px; line-height: 1.5; margin-bottom: 8px; }
.status.ok { color: #166534; background: #f0fdf4; }
.status.err { color: #9a3412; background: #fff7ed; }
.ak-hint { font-size: 12px; color: #b91c1c; }
.muted { font-size: 12px; color: #64748b; line-height: 1.5; }
.frames label { font-size: 12px; }
.draw-tip {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: #1d4ed8; color: #fff; padding: 8px 14px; font-size: 13px;
  z-index: 20; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(15,23,42,.2);
}