:root { font-family: Arial, Helvetica, sans-serif; background: #111; color: #eee; }
body { margin: 0; }
header { padding: 14px 18px; background: #202020; border-bottom: 1px solid #444; }
h1 { margin: 0 0 10px; font-size: 20px; }
.controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
button, select, input { font: inherit; }
button, .fileButton { background: #333; color: #eee; border: 1px solid #666; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.fileButton input { display: none; }
main { display: grid; grid-template-columns: minmax(600px, 1fr) 380px; gap: 16px; padding: 16px; }
.mapWrap { position: relative; width: 100%; max-width: 1111px; background: #222; }
.baseMap { display: block; width: 100%; height: auto; }
#mapSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.territory { opacity: .62; stroke: rgba(255,255,255,.55); stroke-width: 1.5; cursor: pointer; transition: opacity .1s, stroke-width .1s; }
.territory:hover { opacity: .85; stroke-width: 3; }
.territory.selected { opacity: .9; stroke: #fff; stroke-width: 4; }
.map-label { font-size: 15px; font-weight: 700; fill: #fff; stroke: #000; stroke-width: 3px; paint-order: stroke fill; text-anchor: middle; dominant-baseline: middle; pointer-events: none; white-space: pre; }
aside { max-height: calc(100vh - 100px); overflow: auto; }
.panel { background: #202020; border: 1px solid #444; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.panel label { display: grid; gap: 4px; margin-bottom: 10px; }
.panel input, .panel select { padding: 6px; border-radius: 4px; border: 1px solid #666; background: #111; color: #eee; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid #333; padding: 6px; text-align: left; vertical-align: top; }
tr { cursor: pointer; }
tr:hover { background: #252525; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } aside { max-height: none; } }