.map-page { min-width: 0; overflow-x: hidden; }
.map-header { position: relative; z-index: 20; }
.map-brand img { width: min(210px, 48vw); max-height: 58px; object-fit: contain; }
.map-main { padding: clamp(34px, 5vw, 72px) clamp(12px, 3vw, 48px) clamp(50px, 7vw, 90px); background: linear-gradient(rgba(7,12,20,.93),rgba(7,13,23,.97)),url('../../images/Dark Parchment.png') repeat; background-size: auto,600px; }
.map-intro { max-width: 860px; margin: 0 auto 30px; text-align: center; }
.map-intro h1 { margin: 0; color: var(--de-silver); font-family: var(--de-display); font-size: clamp(3.3rem,8vw,7rem); line-height: .95; }
.map-intro > p:last-child { max-width: 680px; margin: 18px auto 0; color: var(--de-text-muted); line-height: 1.75; }
.map-shell { max-width: 1680px; margin: auto; border: 1px solid var(--de-silver-dark); outline: 1px solid rgba(199,208,218,.15); outline-offset: -8px; background: #080e18; box-shadow: 0 28px 70px rgba(0,0,0,.55); }
.map-toolbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; border-bottom: 1px solid rgba(119,136,155,.55); background: linear-gradient(180deg,#142236,#0b1421); }
.zoom-controls { display: flex; align-items: center; gap: 10px; }
.zoom-controls label { color: var(--de-silver); font-family: var(--de-display); font-size: .72rem; letter-spacing: .07em; white-space: nowrap; }
.zoom-controls input { width: min(230px,22vw); accent-color: var(--de-blue); }
.map-control { min-width: 38px; height: 38px; border: 1px solid var(--de-silver-dark); color: var(--de-light); background: rgba(75,120,173,.13); font: 700 1.25rem/1 var(--de-display); cursor: pointer; }
.map-control-text { width: auto; padding: 0 14px; font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.map-control:hover,.map-control:focus-visible { border-color: var(--de-blue-bright); background: rgba(75,120,173,.3); box-shadow: 0 0 16px rgba(75,120,173,.25); }
.map-hint { margin: 0; color: var(--de-text-muted); font-size: .75rem; }
.map-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; min-height: min(72vh,900px); }
.map-viewport { position: relative; min-width: 0; height: min(72vh,900px); overflow: auto; overscroll-behavior: contain; background: #03070c; cursor: grab; scrollbar-color: var(--de-silver-dark) #07101b; }
.map-viewport.is-dragging { cursor: grabbing; user-select: none; }
.map-viewport:focus-visible { outline: 2px solid var(--de-blue-bright); outline-offset: -3px; }
.map-canvas { position: relative; width: 100%; min-width: 100%; line-height: 0; transform-origin: top left; }
.map-canvas > img { width: 100%; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
.map-markers { position: absolute; inset: 0; pointer-events: none; }
.map-marker { --marker-color:#84b9ec; position: absolute; width: 34px; height: 34px; transform: translate(-50%,-100%); border: 2px solid #eef5fc; border-radius: 50% 50% 50% 0; color: #07101b; background: var(--marker-color); box-shadow: 0 3px 10px rgba(0,0,0,.75),0 0 16px color-mix(in srgb,var(--marker-color) 65%,transparent); pointer-events: auto; cursor: pointer; rotate: -45deg; transition: scale .18s ease,filter .18s ease; }
.map-marker::after { content:'✦'; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; rotate:45deg; }
.map-marker:hover,.map-marker:focus-visible,.map-marker.is-active { scale:1.2; filter:brightness(1.15); z-index:3; }
.map-marker-label { position:absolute; left:50%; top:calc(100% + 9px); min-width:max-content; max-width:180px; padding:6px 9px; transform:translateX(-50%) rotate(45deg); border:1px solid var(--de-silver-dark); color:var(--de-light); background:rgba(5,11,19,.94); font:600 10px/1.25 var(--de-display); letter-spacing:.04em; opacity:0; pointer-events:none; }
.map-marker:hover .map-marker-label,.map-marker:focus-visible .map-marker-label,.map-marker.is-active .map-marker-label { opacity:1; }
.map-details { min-width: 0; padding: 32px 26px; border-left: 1px solid rgba(119,136,155,.45); background: linear-gradient(160deg,#111d2d,#070d16); }
.map-details h2 { margin:0; color:var(--de-silver); font-family:var(--de-display); font-size:clamp(1.55rem,2.2vw,2.25rem); line-height:1.05; }
.detail-category { margin:.7rem 0 0; color:var(--de-blue-bright); font-family:var(--de-display); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
#detail-description { color:#c4ccd6; font-size:.88rem; line-height:1.75; }
.marker-list { display:grid; gap:7px; margin-top:26px; }
.marker-list button { padding:10px 11px; border:1px solid rgba(119,136,155,.5); color:var(--de-silver); background:rgba(75,120,173,.08); font:600 .68rem/1.35 var(--de-display); text-align:left; cursor:pointer; }
.marker-list button:hover,.marker-list button.is-active { border-color:var(--de-blue-bright); color:white; background:rgba(75,120,173,.22); }
.map-empty { color:var(--de-text-muted); font-size:.76rem; font-style:italic; }
.map-footer { padding-top:38px; }

.editor-main { min-height:calc(100vh - 72px); }
.editor-login { width:min(520px,calc(100% - 28px)); margin:8vh auto; padding:36px; border:1px solid var(--de-silver-dark); background:linear-gradient(150deg,#111d2d,#070d16); box-shadow:0 25px 60px rgba(0,0,0,.48); text-align:center; }
.editor-login h1,.editor-panel h2 { color:var(--de-silver); font-family:var(--de-display); }
.editor-field { display:grid; gap:7px; margin:15px 0; text-align:left; }
.editor-field label { color:var(--de-silver); font:600 .7rem var(--de-display); letter-spacing:.08em; text-transform:uppercase; }
.editor-field input,.editor-field textarea,.editor-field select { width:100%; padding:11px 12px; border:1px solid var(--de-silver-dark); border-radius:0; color:var(--de-light); background:#07101b; font:inherit; }
.editor-field textarea { min-height:110px; resize:vertical; }
.editor-message { min-height:1.4em; color:var(--de-blue-bright); font-size:.82rem; }
.editor-message.is-error { color:#f0a6a6; }
.editor-grid { max-width:1680px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; }
.editor-grid .map-viewport { height:min(72vh,850px); border:1px solid var(--de-silver-dark); }
.editor-panel { padding:24px; border:1px solid var(--de-silver-dark); background:linear-gradient(150deg,#111d2d,#070d16); }
.editor-panel h2 { margin:0 0 8px; }
.editor-actions { display:flex; flex-wrap:wrap; gap:9px; }
.editor-actions .de-button { margin:0; }
.editor-marker-list { max-height:320px; margin-top:20px; overflow:auto; }
.editor-marker-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(119,136,155,.3); }
.editor-marker-row button { border:0; color:var(--de-blue-bright); background:none; cursor:pointer; font:600 .65rem var(--de-display); }
.editor-marker-row strong { color:var(--de-silver); font-size:.8rem; }
.editor-map-note { max-width:1680px; margin:0 auto 14px; color:var(--de-text-muted); font-size:.82rem; }
.logout-link { color:var(--de-blue-bright); font-size:.75rem; }

@media (max-width:980px){.map-layout{grid-template-columns:1fr}.map-details{border-left:0;border-top:1px solid rgba(119,136,155,.45)}.editor-grid{grid-template-columns:1fr}.editor-panel{order:-1}.map-viewport,.editor-grid .map-viewport{height:62vh}}
@media (max-width:650px){.map-main{padding-left:8px;padding-right:8px}.map-toolbar{align-items:stretch;flex-direction:column}.zoom-controls{display:grid;grid-template-columns:38px 1fr 38px auto}.zoom-controls label{display:none}.zoom-controls input{width:100%}.map-hint{text-align:center}.map-layout{min-height:0}.map-viewport,.editor-grid .map-viewport{height:57vh}.map-details{padding:26px 20px}.map-marker{width:30px;height:30px}.editor-login{padding:28px 22px}.editor-panel{padding:20px 16px}}
@media (prefers-reduced-motion:reduce){.map-marker{transition:none}}