* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: #222; background: #f5f5f5; }
header { background: #1f3a5f; color: white; padding: 14px 24px; }
header h1 { margin: 0; font-size: 20px; font-weight: 600; }
header .subtitle { margin: 4px 0 0; font-size: 13px; opacity: 0.85; }

.disclaimer { background: #fff8e1; border-bottom: 1px solid #e4d89a; color: #5a4500; padding: 10px 24px; font-size: 12px; line-height: 1.5; }
.disclaimer a { color: #7a5a00; }

.layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } }

aside.panel { background: white; border-radius: 6px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); height: fit-content; }
aside.panel label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; color: #444; }
aside.panel input { width: 100%; padding: 7px 9px; margin-top: 4px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
aside.panel button { width: 100%; padding: 10px; font-size: 14px; font-weight: 600; background: #1f3a5f; color: white; border: 0; border-radius: 4px; cursor: pointer; margin-top: 4px; }
aside.panel button:hover { background: #2a4c7b; }
aside.panel .tip { font-size: 11px; color: #777; margin-top: 14px; line-height: 1.4; }

main { display: flex; flex-direction: column; gap: 16px; }
.card { background: white; border-radius: 6px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #444; border-bottom: 1px solid #eee; padding-bottom: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; padding: 6px 8px; background: #f0f0f0; border-bottom: 1px solid #ddd; font-weight: 600; }
tbody td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
tbody tr.inside td.inside-cell { background: #ffe5e5; font-weight: 600; }
tbody td small { color: #777; font-size: 11px; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
@media (max-width: 900px) { .result-grid { grid-template-columns: 1fr; } }
.compact-table { font-size: 12px; }
.compact-table thead th { padding: 4px 6px; }
.compact-table tbody td { padding: 5px 6px; }
.compact-table .layer-name { font-weight: 500; line-height: 1.3; }
.compact-table .layer-meta { display: block; color: #888; font-size: 10.5px; margin-top: 1px; line-height: 1.25; }
.compact-table .inside-cell, .compact-table .nearest-cell { white-space: nowrap; text-align: center; }
.compact-table thead th:nth-child(2), .compact-table thead th:nth-child(3) { text-align: center; }

.paragraph { border: 1px solid #bbb; padding: 12px 16px; background: #f8f8f8; border-radius: 6px; font-family: Georgia, serif; line-height: 1.55; font-size: 14px; }
.paragraph.empty { color: #888; font-style: italic; font-family: inherit; }

#map { height: 600px; border-radius: 4px; }

.static-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 12px; }
.static-header h2 { margin: 0; border: 0; padding: 0; }
.secondary-btn { padding: 6px 12px; font-size: 12px; background: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.secondary-btn:hover { background: #e0e0e0; }
#static-wrap { width: 100%; min-height: 400px; background: #fafafa; border: 1px dashed #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#static-img { max-width: 100%; height: auto; display: block; }
#static-img:not([src]) { display: none; }

.subject-pin { background: transparent; border: 0; }
.subject-pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

.status { padding: 10px; font-size: 13px; color: #666; }
.status.err { color: #b00020; font-weight: 600; }