:root{
  --bg: #0b1020;
  --bg2: #0d1630;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.64);
  --text: rgba(255,255,255,.92);

  --accent: #62d0ff;
  --accent2: #a168ff;

  --radius: 22px;
  --shadow: 0 18px 48px rgba(0,0,0,.35);

  --fontSize: 18px;
  --lineHeight: 1.75;
  --margins: 22px;
  --contentMax: 980px;
  --safeBottom: env(safe-area-inset-bottom, 0px);
}

body[data-theme="light"]{
  --bg: #f6f7fb;
  --bg2: #eef2ff;
  --panel: rgba(20, 25, 40, .06);
  --panel2: rgba(20, 25, 40, .08);
  --stroke: rgba(20, 25, 40, .10);
  --muted: rgba(20,25,40,.62);
  --text: rgba(15,18,30,.92);
}

body[data-theme="sepia"]{
  --bg: #f7edd6;
  --bg2: #f2e3c4;
  --panel: rgba(32, 20, 8, .06);
  --panel2: rgba(32, 20, 8, .08);
  --stroke: rgba(32, 20, 8, .12);
  --muted: rgba(32,20,8,.62);
  --text: rgba(24, 16, 8, .92);
}

*{ box-sizing: border-box; }
html,body{ height:100%; overflow:hidden; }
body{
  margin:0;
  overflow:hidden;
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(98,208,255,.08), transparent 65%),
    radial-gradient(1000px 680px at 80% 20%, rgba(161,104,255,.07), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.app{
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  gap: 10px;
}

.brand{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width:0;
}
.logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(98,208,255,.28), rgba(161,104,255,.28));
  display:grid;
  place-items:center;
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  flex: 0 0 auto;
}
.brandText{ min-width:0; }
.title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle{
  font-size: 12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top: 2px;
}

.topActions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex: 0 0 auto;
}

.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 140ms ease, background 140ms ease;
}
.iconBtn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--panel2) 75%, transparent); }
.iconBtn:active{ transform: translateY(0px) scale(.99); }
.ico{ font-size: 18px; line-height:1; }

.progressWrap{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 0 14px 10px;
}
.progressBar{
  height: 10px;
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  overflow:hidden;
}
.progressFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.progressMeta{
  font-size: 12px;
  color: var(--muted);
  min-width: 112px;
  text-align:right;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 4px 14px 0;
}

.paper{
  display:flex;
  flex-direction:column;
  width: min(1200px, 100%);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  min-height: 520px;
}

.paper::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .12;
  mix-blend-mode: overlay;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 480px at 80% 30%, rgba(255,255,255,.08), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0px, rgba(255,255,255,.016) 1px, transparent 1px, transparent 4px);
}
body[data-theme="light"] .paper::before,
body[data-theme="sepia"] .paper::before{
  opacity:.22;
  mix-blend-mode: multiply;
  background:
    radial-gradient(900px 600px at 25% 0%, rgba(0,0,0,.05), transparent 62%),
    radial-gradient(700px 520px at 80% 20%, rgba(0,0,0,.04), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.014) 0px, rgba(0,0,0,.014) 1px, transparent 1px, transparent 4px);
}

.scroller{
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--margins);
  padding-bottom: calc(var(--margins) + 14px);
}
.scroller::-webkit-scrollbar{ display:none; }

.flow{
  width: min(var(--contentMax), 100%);
  margin: 0 auto;
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  color: var(--text);
}

.flow h2.chapterHeading{
  margin: .1em 0 .8em;
  font-size: 1.5em;
  letter-spacing: .2px;
}
.flow h3{
  margin: 1.1em 0 .55em;
  font-size: 1.15em;
}
.flow p{ margin: 0 0 1em; }
.flow hr{
  border: none;
  border-top: 1px solid var(--stroke);
  margin: 1.25em 0;
  opacity: .7;
}
.flow blockquote{
  margin: 1.1em 0;
  padding: .75em .9em;
  border-left: 3px solid color-mix(in oklab, var(--accent) 70%, transparent);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  border-radius: 14px;
}
.flow img{
  display:block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  margin: 1.1em auto;
  background: color-mix(in oklab, var(--panel) 55%, transparent);
}

.bottombar{
  position: static;
  padding: 12px;
  padding-bottom: calc(12px + var(--safeBottom));
  display:flex;
  align-items:center;
  gap: 10px;
  background: color-mix(in oklab, var(--panel) 72%, transparent);
  border-top: 1px solid var(--stroke);
}

.navBtn{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.chev{ font-size: 26px; line-height:1; }

.pillBtn{
  flex: 1;
  height: 54px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--stroke));
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 650;
}
.pillBtn .plus{ font-size: 18px; opacity: .9; }

.menuBtn{
  height: 54px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  color: var(--text);
  cursor:pointer;
  display:flex;
  gap: 10px;
  align-items:center;
}
.hamb{ font-size: 20px; opacity:.9; }

.hint{
  margin: 12px 0 14px;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
}


/* URL/Embed toggles */
body.no-footer .footer{ display:none !important; }
body.no-hint .hint{ display:none !important; }

.footer{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px 16px;
  color: var(--muted);
  font-size: 12px;
}
.footer a{ color: inherit; text-decoration:none; }
.footer a:hover{ text-decoration: underline; }

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 80;
}
.modal.open{ display:flex; }
.modalCard{
  width: min(720px, 100%);
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 92%, black);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--stroke);
}
.modalTitle{ font-weight: 750; }
.modalBody{ padding: 12px; }

.card{
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 72%, transparent);
  border-radius: 18px;
  padding: 12px;
}
.label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.label b{ font-weight: 750; }
.label span{ color: var(--muted); font-size: 12px; }

.row{ display:flex; gap: 10px; align-items:center; }
.grid{ display:grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){ .grid{ grid-template-columns: 1fr; } }

select, input[type="range"], input[type="text"]{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 88%, black);
  color: var(--text);
  outline:none;
}

.btn{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 72%, transparent);
  color: var(--text);
  cursor:pointer;
}
.btn.primary{
  border-color: color-mix(in oklab, var(--accent) 38%, var(--stroke));
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 30%, var(--panel2)), color-mix(in oklab, var(--accent2) 26%, var(--panel2)));
}
.btn.danger{
  border-color: color-mix(in oklab, #ff5b6b 45%, var(--stroke));
}

.list{ display:flex; flex-direction:column; gap: 10px; }
.bm{
  display:flex;
  gap: 12px;
  justify-content:space-between;
  align-items:flex-start;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
}
.bmTitle{ font-weight: 700; font-size: 13px; }
.bmMeta{ color: var(--muted); font-size: 12px; margin-top: 4px; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--safeBottom));
  background: rgba(0,0,0,.78);
  color: white;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  display:none;
  z-index: 90;
  font-size: 13px;
}
.toast.show{ display:block; }

/* Fullscreen reading mode */
.fsHud{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 12px calc(10px + var(--safeBottom));
  display:none;
  z-index: 70;
  pointer-events:none;
}
.fsProgress{
  height: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--stroke) 90%, transparent);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  overflow:hidden;
  opacity: .75;
}
.fsProgress > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
}

body.fs-reading .fsHud{ display:block; }
body.fs-reading .topbar,
body.fs-reading .progressWrap,
body.fs-reading .bottombar,
body.fs-reading .footer,
body.fs-reading .hint{
  display:none;
}

body.fs-reading .paper{
  display:flex;
  flex-direction:column; box-shadow: 0 30px 90px rgba(0,0,0,.60); }

/* Full-height layout in fullscreen/reading mode */
body.fs-reading .main{
  padding: 0;
  align-items: stretch;
}
body.fs-reading .paper{
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  border-radius: 0;
}
body.fs-reading .scroller{
  flex: 1;
  min-height: 0;
  padding-bottom: calc(var(--margins) + 14px);
}


body.fs-reading.ui-visible .topbar{ display:flex; }
body.fs-reading.ui-visible .progressWrap{ display:block; }
body.fs-reading.ui-visible .bottombar{ display:flex; }
body.fs-reading.ui-visible .footer{ display:block; }


@media (prefers-reduced-motion: reduce){
  .iconBtn, .btn{ transition:none; }
}


/* ===== Reading Focus (Desktop) ===== */
@media (min-width: 900px){
  .app{
    padding-top: 12px;
  }

  .paper{
  display:flex;
  flex-direction:column;
    margin-top: 8px;
  }

  .bottombar{
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.16));
  }

  .hint{
    opacity: .55;
  }

  body:not(.ui-active) .topbar,
  body:not(.ui-active) .progressWrap,
  body:not(.ui-active) .bottombar{
    opacity: .92;
  }
}

/* Footer should not intrude into reading */
.footer{
  margin-top: 18px;
  opacity: .6;
}

select option{ background: color-mix(in oklab, var(--bg) 92%, black); color: var(--text); }


/* ---------- v5 layout fixes ---------- */

/* Make reader controls NOT overlap text */
.scroller{
  flex: 1 1 auto;
  height: auto !important;
  max-height: none !important;
  padding-bottom: calc(var(--margins) + 12px) !important;
}
.bottombar{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  background: color-mix(in oklab, var(--panel) 72%, transparent) !important;
  border-top: 1px solid var(--stroke);
}

/* Footer fixed so it doesn't affect reader height */
.footerFixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  pointer-events: auto;
  justify-content: center;
  padding-bottom: calc(12px + var(--safeBottom));
}
.main{
  padding-bottom: calc(54px + var(--safeBottom)); /* reserve for footer */
}

/* Reader height uses viewport minus chrome */
.paper{
  height: calc(100dvh - 140px); /* header+progress+main paddings */
  max-height: 760px;
}
@media (max-width: 760px){
  .paper{
    height: calc(100dvh - 120px);
    max-height: none;
  }
}

/* Chapter separators */
.chapterSep{
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--stroke) 90%, transparent), transparent);
  margin: 1.3em 0 1.1em;
  opacity: .9;
}
.chapterMeta{
  text-align:center;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 1.2em;
  letter-spacing: .2px;
}

/* v6 sizing: paper consumes available viewport without making page scroll */
.paper{
  height: calc(100dvh - 170px); /* topbar+progress+hint spacing */
  max-height: 860px;
}
@media (max-width: 760px){
  .paper{ height: calc(100dvh - 150px); max-height: none; }
}

.logo img{width:28px;height:28px;object-fit:contain;filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));}

/* v9 mobile modal sizing */
@media (max-width: 760px){
  .modal{ padding: 10px; }
  .modalCard{ border-radius: 18px; }
  .modalHead{ padding: 10px 10px 8px; }
  .modalBody{ padding: 10px; }
  .label b{ font-size: 13px; }
  .label span{ font-size: 11px; }
  select, input[type="range"], input[type="text"]{ padding: 9px 10px; border-radius: 12px; }
  .btn{ height: 42px; border-radius: 12px; }
  .grid{ gap: 10px; }
}

body.hide-images .flow img{ display:none !important; }


body.fs-reading .footer,
body.fs-reading .hint{
  display:none !important;
}

/* ===== Map-specific (Reader-aligned) ===== */
body[data-app="map"] .paper{
  display:flex;
  flex-direction:column;
  height: calc(100dvh - 160px);
  min-height: 520px;
}
@media (max-width: 760px){
  body[data-app="map"] .paper{ height: calc(100dvh - 170px); min-height: 460px; }
}

/* make paper fill main area like reader */
body[data-app="map"] .main{ padding-bottom: calc(18px + var(--safeBottom)); }

.mapStage{
  position: relative;
  flex: 1;
  min-height: 0;
  overflow:hidden;
  border-radius: var(--radius);
}

.mapCanvas{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  touch-action: none;
  cursor: grab;
}
.mapCanvas:active{ cursor:grabbing; }

.mapInner{
  will-change: transform;
  transform-origin: 0 0;
}

.mapInner img{
  display:block;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
}

.marker{
  position:absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%,-100%);
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: color-mix(in oklab, var(--panel) 76%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow);
  cursor:pointer;
  padding:0;
  color: rgba(255,255,255,.86);
}
.marker[aria-pressed="true"]{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke));
  box-shadow: 0 0 0 4px rgba(98,208,255,.10), var(--shadow);
}
.markerDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(98,208,255,.12);
}

.popup{
  position:absolute;
  min-width: 240px;
  max-width: 320px;
  transform: translate(-50%,-110%);
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 88%, black);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  padding: 10px;
  z-index: 30;
}
.popupHead{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content:space-between;
}
.popupTitle{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
}
.popupSub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.popupNote{
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  border-radius: 18px;
  padding: 10px 12px;
  margin-top: 10px;
}
.kv b{ font-weight: 750; }
.kv span{ color: var(--muted); font-size: 12px; }

/* Map fullscreen mode */
body.fs-map .topbar,
body.fs-map .progressWrap,
body.fs-map .footer,
body.fs-map .hint{
  display:none !important;
}
body.fs-map .main{
  padding: 0 !important;
}
body.fs-map .paper{
  height: 100dvh !important;
  width: 100vw !important;
  border-radius: 0 !important;
}
body.fs-map .mapStage{
  border-radius: 0 !important;
}

/* Bottombar tweaks: map tools */
.mapTools .pillBtn{ min-width: 140px; }

/* Modal list items like Reader cards */
.placeRow{
  display:flex;
  gap: 10px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  border-radius: 18px;
  padding: 10px;
  cursor:pointer;
}
.placeRow:hover{ background: color-mix(in oklab, var(--panel2) 82%, transparent); }
.placeRow .meta{ min-width:0; flex:1; }
.placeRow .title{ font-weight: 780; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.placeRow .sub{ color: var(--muted); font-size: 12px; margin-top: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.placeRow .tag{
  flex:0 0 auto;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 10px;
  height: fit-content;
}

/* Input field inside modal */
.input{
  width:100%;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  color: var(--text);
  padding: 0 12px;
  outline:none;
}
.input::placeholder{ color: color-mix(in oklab, var(--muted) 85%, transparent); }
.small{ font-size: 12px; color: var(--muted); }


/* Dropdown hover/focus to match Reader */
select.input:hover{
  background: color-mix(in oklab, var(--panel2) 82%, transparent);
  border-color: color-mix(in oklab, var(--stroke) 70%, var(--accent));
}
select.input:focus{
  outline: none;
  background: color-mix(in oklab, var(--panel2) 86%, transparent);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke));
  box-shadow: 0 0 0 4px rgba(98,208,255,.10);
}



.markerEmoji{
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}


/* ===== Pin options ===== */
:root{
  --pinScale: 1;
}
.marker{
  transform: translate(-50%,-100%) scale(var(--pinScale));
  transform-origin: 50% 100%;
}
body.pinsHidden .marker{
  opacity: 0;
  pointer-events: none;
}
.markerLabel{
  position:absolute;
  left:50%;
  top: 100%;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  max-width: 160px;
  overflow:hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 5px 9px;
  display:none;
}
body.pinLabels .markerLabel{ display:block; }

.settingRow{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  border-radius: 18px;
  padding: 10px;
}
.settingRow .meta{ min-width:0; flex:1; }
.settingRow .title{ font-weight: 780; }
.settingRow .sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.settingRow .control{ width: 180px; }
@media (max-width: 420px){
  .settingRow{ align-items:flex-start; flex-direction:column; }
  .settingRow .control{ width: 100%; }
}

.popupImg{
  width:100%;
  height:auto;
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  display:block;
}





.markerName{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,6px);
  font-size:11px;
  color:#000;
  background:rgba(255,255,255,.85);
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  white-space:nowrap;
  pointer-events:none;
}

.marker{
  position:absolute;
  transform:translate(-50%,-100%);
}

.markerDot,
.markerEmoji{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Full map pin panel */
.pinPanel{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;transform:scale(.985);}
.pinPanel.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transition:opacity .18s ease, transform .18s ease, visibility 0s;}

.pinPanelCard{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction:column;
  border: 1px solid rgba(255,255,255,.10);
  background: color-mix(in oklab, var(--panel) 88%, transparent);
}

.pinPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pinPanelTitle{ font-weight: 860; font-size: 16px; line-height: 1.25; }
.pinPanelSub{ margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }

.pinPanelBody{
  padding: 14px;
  overflow:auto;
  min-height: 0;
}
.pinPanelBody > *{ max-width: 820px; }

.pinPanelImg{
  width:100%;
  height:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  display:block;
  margin-bottom: 12px;
}
.pinPanelNote{
  color: rgba(255,255,255,.86);
  line-height: 1.6;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.panelOpen #mapInner{pointer-events:none;}
body.panelOpen #mapCanvas{touch-action:none;}


/* Detail panel upgrades */
.pinPanelCard{width:100%;height:100%;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.10);background:color-mix(in oklab,var(--panel) 88%,transparent);overflow:hidden;}
.pinHero{position:relative;width:100%;height:220px;background-size:cover;background-position:center;flex:0 0 auto;}
@media (max-width:720px){.pinHero{height:180px;}}
.pinHero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.72) 100%);}
.pinHeroInner{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;}
.pinHeroText{min-width:0;}
.pinPanelTitle{font-weight:860;font-size:18px;line-height:1.2;}
.pinPanelSub{margin-top:4px;color:rgba(255,255,255,.78);font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pinMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.pinChip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:rgba(255,255,255,.86);font-size:12px;line-height:1;}
.pinPanelBody{padding:16px;overflow:auto;min-height:0;}
.pinContent{max-width:820px;margin:0 auto;}
.pinQuote{margin:14px 0 16px;padding:12px 14px;border-left:3px solid rgba(255,255,255,.40);background:rgba(255,255,255,.06);border-radius:14px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.55;font-style:italic;}
.pinPanelNote{color:rgba(255,255,255,.88);line-height:1.65;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;}



/* Cinematic detail upgrades */
.pinHero{overflow:hidden;}
.pinHero::before{
  content:"";
  position:absolute; inset:-12px;
  background:inherit;
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  filter: saturate(1.05) contrast(1.02);
  opacity:.92;
  animation: pinHeroKenBurns 12s ease-in-out both;
}
.pinHero .pinHeroInner, .pinHero::after{position:relative; z-index:2;}
@keyframes pinHeroKenBurns{
  0%{transform:scale(1.06) translate3d(0,0,0);}
  100%{transform:scale(1.12) translate3d(-1.5%, -1.2%, 0);}
}

.pinSection{margin-top:16px;}
.pinSectionTitle{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 8px;
}
.pinCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
}
.pinDivider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0 10px;
}

.pinRelevance{
  color: rgba(255,255,255,.88);
  line-height: 1.65;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap:anywhere;
}

.pinPills{display:flex;flex-wrap:wrap;gap:8px;}
.pinPill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  line-height:1;
}
.pinPill .ico{
  width:22px; height:22px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}
.pinPillBtn{cursor:pointer;}
.pinPillBtn:hover{background: rgba(0,0,0,.26);}

.pinNearbyList{display:flex;flex-direction:column;gap:8px;}
.pinNearbyItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.pinNearbyItem:hover{background: rgba(255,255,255,.08);}
.pinNearbyItem .left{min-width:0;}
.pinNearbyItem .name{font-size:14px;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pinNearbyItem .sub{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.pinNearbyItem .arrow{opacity:.7;}

/* --- Editor bar (enabled via ?edit=1 on edit.* domain) --- */
.editBar{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.editBadge{
  font-size: 11px;
  letter-spacing: .12em;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}
.editMain{min-width: 0; flex: 1;}
.editTitle{font-weight: 700; font-size: 13px; color: rgba(255,255,255,.92);}
.editSub{font-size: 12px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;}
.editMeta{display:flex; flex-direction:column; gap:4px; font-size:12px; color: rgba(255,255,255,.72);}
.editRow{display:flex; align-items:center; gap:6px;}
.editRow .k{color: rgba(255,255,255,.55);}
.editRow .v{color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums;}
.editActions{display:flex; gap:8px;}

.markerEditing{outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px;}

@media (max-width: 720px){
  .editBar{flex-wrap:wrap;}
  .editActions{width:100%;}
  .editActions .btn{flex:1;}
  .editMeta{width:100%; flex-direction:row; justify-content:space-between;}
}