.atlas { background: #151e19; border: 1px solid #4e5d48; border-top: 3px solid #b18147; border-radius: 10px; overflow: hidden; color: #e8efe9; }
.atlas-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px; }
.atlas-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; }
.atlas-stage { position: relative; width: 100%; aspect-ratio: var(--map-ratio, 1.6); min-height: 300px; background: #0d1515; touch-action: none; overflow: hidden; cursor: grab; }
.atlas-stage svg { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.atlas-stage:focus-visible { outline: 3px solid #e6b866; outline-offset: -3px; }
.atlas-stage polygon { stroke-width: 2; vector-effect: non-scaling-stroke; fill-opacity: .2; cursor: pointer; }
.atlas-stage polygon:hover, .atlas-stage polygon:focus, .atlas-stage polygon.is-selected { fill-opacity: .5; stroke-width: 4; outline: none; }
.atlas-stage [data-map-drawing] polygon { pointer-events: none; stroke-dasharray: 7 4; }
.atlas-stage circle { fill: #fff0c9; stroke: #382814; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: move; }
.atlas-stage.is-drawing { cursor: crosshair; }
.atlas-north { position: absolute; top: 10px; right: 14px; font: bold 13px monospace; color: #eee0ba; pointer-events: none; text-shadow: 0 1px 4px #000; }
.atlas-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.atlas-tools button, .atlas-list button { background: #25372b; color: #e3eade; border: 1px solid #62775d; border-radius: 5px; padding: 7px 12px; }
.atlas-tools button[aria-pressed="true"] { background: #785329; border-color: #dfa756; }
.atlas-editor-tools { padding: 0 20px 15px; }
.atlas-help { padding: 10px 15px; margin: 0; color: #bacabf; font-size: .8rem; }
.atlas-aside { border-left: 1px solid #3e503d; padding: 18px; min-width: 0; }
.atlas-list { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.atlas-list button { text-align: left; font-size: .85rem; border-left: 5px solid var(--zone-color); overflow-wrap: anywhere; }
.atlas-list button[aria-pressed="true"] { background: #45503a; }
.atlas-info { margin-top: 22px; border-top: 1px solid #3e503d; padding-top: 18px; overflow-wrap: anywhere; }
.atlas-info p { color: #c0ccc2; font-size: .88rem; white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
.atlas-info img { width: 100%; height: 125px; object-fit: cover; border-radius: 5px; margin-bottom: 14px; }
.atlas-info a { color: #a4e6b6; }
@media(max-width: 900px) { .atlas-layout { grid-template-columns: 1fr; } .atlas-aside { border-left: 0; border-top: 1px solid #3e503d; } .atlas-list { max-height: 120px; } .atlas-heading { align-items: start; flex-direction: column; } }