:root {
  --bg: #eef2f7;
  --surface: #fff;
  --border: #d5dde8;
  --text: #1a2332;
  --muted: #5c6b82;
  --primary: #0b5cab;
  --success: #0f7a3d;
  --danger: #b42318;
  font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--primary); }

.wrap { max-width: 920px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.header h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; box-shadow: 0 6px 20px rgba(15,30,60,.06); }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

h2 { margin: 0 0 0.5rem; font-size: 1rem; }
input[type=file] { width: 100%; margin-top: 0.35rem; }

.check-list label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; margin-bottom: 0.4rem; }
.check-list input { width: auto; margin-top: 0.2rem; }

.btn { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; font-size: 0.95rem; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(0.92); color: #fff; }

.flash { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.flash-success { background: #e8f8ee; color: var(--success); }
.flash-error { background: #fdecec; color: var(--danger); }

.badge { font-size: 0.75rem; background: #e8f1fc; color: var(--primary); padding: 0.1rem 0.45rem; border-radius: 999px; }

.progress-block { margin-bottom: 1rem; }
.progress-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; align-items: baseline; }
.progress-head span:last-child { color: var(--text); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.progress-message { color: var(--muted); font-size: 0.88rem; font-weight: 400; }
.progress-track { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #3b82f6); border-radius: 999px; transition: width 0.35s ease; width: 0%; }

.preview-map { height: 420px; border-radius: 10px; border: 1px solid var(--border); margin-top: 1rem; z-index: 0; }
.pole-picker-map {
  height: 360px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 0.65rem;
  z-index: 0;
}
.pole-picker-map--empty { background: #f8fafc; }
.pole-picker-legend { margin-top: 0.45rem; margin-bottom: 0.65rem; }
.pole-marker { cursor: pointer; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.leg-points { color: #2563eb; }
.leg-start { color: #059669; }
.leg-lines { color: #d97706; }
.leg-route { color: #dc2626; }

select {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}
select:disabled { background: #f1f5f9; color: var(--muted); }
.field-block h2 { margin-bottom: 0.25rem; }
.pole-status { margin-top: 0.35rem; }