:root {
  --navy:#123456;
  --navy-2:#0b2742;
  --blue:#2d70a8;
  --blue-soft:#eaf3fb;
  --teal:#0f766e;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --text:#17202a;
  --muted:#667085;
  --line:#d9e1e8;
  --danger:#b42318;
  --warning:#9a6700;
  --success:#067647;
  --shadow:0 8px 26px rgba(15, 42, 68, .08);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 Inter, "Segoe UI", Arial, sans-serif; }
button, input, select { font:inherit; }
.shell { width:min(1220px, calc(100% - 32px)); margin-inline:auto; }
.hero { color:#fff; background:linear-gradient(125deg, var(--navy-2), var(--navy) 55%, #256ca3); }
.hero-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:210px; padding-block:34px; }
.eyebrow { margin:0 0 8px; color:#a7d2f2; font-size:12px; font-weight:800; letter-spacing:.16em; }
.hero h1 { margin:0; font-size:clamp(32px, 5vw, 52px); line-height:1.05; }
.hero p:not(.eyebrow) { max-width:680px; margin:14px 0 0; color:#dbeaf6; font-size:17px; }
.hero-badge { display:flex; gap:10px; align-items:center; padding:16px 18px; border:1px solid rgba(255,255,255,.3); border-radius:14px; background:rgba(255,255,255,.08); white-space:nowrap; }
main { padding-block:26px 50px; }
.card { margin-bottom:20px; padding:24px; background:var(--surface); border:1px solid #e3e9ef; border-radius:16px; box-shadow:var(--shadow); }
.section-heading, .heading-left { display:flex; align-items:flex-start; gap:12px; }
.section-heading { margin-bottom:20px; }
.section-heading.split { justify-content:space-between; gap:20px; }
.section-heading h2 { margin:0; color:var(--navy); font-size:22px; }
.section-heading p { margin:3px 0 0; color:var(--muted); }
.step { display:grid; flex:0 0 34px; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:var(--navy); font-weight:800; }
.form-grid { display:grid; gap:16px; }
.form-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
label { display:flex; flex-direction:column; gap:7px; color:#344054; font-weight:700; }
input, select { width:100%; min-height:42px; padding:9px 11px; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:9px; }
input:focus, select:focus, button:focus-visible, .file-button:focus-within { outline:3px solid rgba(45,112,168,.2); border-color:var(--blue); }
input.invalid, select.invalid { border-color:var(--danger); background:#fff8f7; }
.info, .message { padding:11px 13px; border-radius:9px; }
.info { margin:16px 0 0; color:#28516f; background:var(--blue-soft); border-left:4px solid var(--blue); }
.message { margin:0 0 16px; color:#344054; background:#f8fafc; border:1px solid var(--line); }
.message.error { color:var(--danger); background:#fff5f4; border-color:#f5b7b1; }
.message.success { color:var(--success); background:#ecfdf3; border-color:#abefc6; }
.message.warning { color:var(--warning); background:#fffaeb; border-color:#fedf89; }
.toolbar, .primary-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; color:#fff; background:var(--navy); border:1px solid var(--navy); border-radius:9px; font-weight:800; cursor:pointer; text-decoration:none; }
.button:hover { filter:brightness(1.08); }
.button.secondary { color:var(--navy); background:#fff; border-color:#9fb4c7; }
.button.danger { min-height:34px; padding:7px 10px; color:var(--danger); background:#fff; border-color:#f1b7b2; }
.button.large { min-width:190px; min-height:48px; }
.file-button { flex-direction:row; }
.primary-actions { justify-content:flex-end; margin:0 0 20px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; }
table { width:100%; min-width:980px; border-collapse:collapse; }
th, td { padding:10px; border-bottom:1px solid #e7edf2; text-align:left; vertical-align:middle; }
th { color:#fff; background:var(--navy); font-size:13px; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
td input { min-width:120px; }
td .radio-wrap { display:flex; justify-content:center; }
td input[type="radio"] { width:18px; min-width:18px; min-height:18px; }
.footnote, .map-note { color:var(--muted); font-size:12px; }
.hidden { display:none !important; }
.summary-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:22px; }
.metric { padding:16px; border:1px solid #dbe6ee; border-left:4px solid var(--blue); border-radius:11px; background:#f9fbfd; }
.metric span { display:block; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.metric strong { display:block; margin-top:5px; color:var(--navy); font-size:18px; }
.results-grid { display:grid; grid-template-columns:minmax(0, .85fr) minmax(440px, 1.15fr); gap:22px; align-items:start; }
.results-grid h3 { margin:0 0 10px; color:var(--navy); }
.compact table { min-width:560px; }
#map { height:520px; border:1px solid var(--line); border-radius:12px; background:#e8eef3; }
.reference-marker { display:grid; place-items:center; width:24px; height:24px; border:3px solid #fff; border-radius:50%; background:#d92d20; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.location-marker { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#2275b5; box-shadow:0 2px 7px rgba(0,0,0,.3); }
footer { padding:26px 16px; color:var(--muted); text-align:center; }
@media (max-width:900px) {
  .form-grid.three, .summary-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .results-grid { grid-template-columns:1fr; }
  .section-heading.split { align-items:flex-start; flex-direction:column; }
  .hero-badge { display:none; }
}
@media (max-width:600px) {
  .shell { width:min(100% - 20px, 1220px); }
  .hero-inner { min-height:180px; }
  .card { padding:17px; }
  .form-grid.three, .summary-grid { grid-template-columns:1fr; }
  .toolbar, .primary-actions { display:grid; width:100%; }
  .button { width:100%; }
  #map { height:420px; }
}
@media print {
  .toolbar, .primary-actions, .hero-badge { display:none !important; }
  body { background:#fff; }
  .card { box-shadow:none; break-inside:avoid; }
}
