:root {
  --map-panel: #111820;
  --map-panel-2: #17212b;
  --map-line: rgba(255,255,255,.11);
  --map-muted: rgba(232,239,246,.62);
  --map-gold: #f6c344;
  --map-blue: #4ea1ff;
}

.faction-map-page { overflow-x: hidden; }
.faction-map-page [hidden] { display: none !important; }
.faction-map-page.is-map-full-window { overflow: hidden; }
.faction-map-site-shell { width: calc(100% - 24px); max-width: none; padding-bottom: 16px; }
.faction-map-site-shell .site-header { margin-bottom: 10px; }

.faction-map-app {
  --map-sidebar-lane: 362px;
  position: relative;
  display: block;
  height: max(650px, calc(100dvh - 136px));
  max-height: 980px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: #0b1117;
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
}
.faction-map-app.is-full-window { position: fixed; z-index: 10050; inset: 0; width: 100vw; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.faction-map-sidebar {
  position: absolute;
  z-index: 30;
  top: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  width: 338px;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(27,38,49,.98), rgba(13,20,27,.99));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
  transition: transform .2s ease, opacity .2s ease;
}
.faction-map-app.is-panel-collapsed .faction-map-sidebar { opacity: 0; pointer-events: none; transform: translateX(calc(-100% - 24px)); }

.faction-map-scope-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; border-bottom: 1px solid var(--map-line); background: rgba(5,10,15,.52); }
.faction-map-scope-switcher a,
.faction-map-scope-switcher > span { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 8px; padding: 8px 7px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 900; text-align: center; }
.faction-map-scope-switcher a:hover { border-color: rgba(255,255,255,.12); color: #fff; background: rgba(255,255,255,.045); }
.faction-map-scope-switcher a.is-active { border-color: rgba(246,195,68,.42); color: #fff; background: rgba(246,195,68,.12); box-shadow: inset 0 0 16px rgba(246,195,68,.05); }
.faction-map-scope-switcher a span,
.faction-map-scope-switcher > span i { color: var(--map-gold); font-size: 13px; font-style: normal; }
.faction-map-scope-switcher > span.is-disabled { opacity: .38; cursor: not-allowed; }

.faction-map-sidebar-head { display: flex; align-items: center; gap: 11px; padding: 17px 17px 15px; border-bottom: 1px solid var(--map-line); }
.faction-map-faction-mark { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border: 1px solid rgba(246,195,68,.35); border-radius: 11px; color: var(--map-gold); background: rgba(246,195,68,.09); font-size: 21px; }
.faction-map-sidebar-head > div:nth-child(2) { min-width: 0; }
.faction-map-sidebar-head span { display: block; color: var(--map-gold); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.faction-map-sidebar-head h1 { overflow: hidden; margin: 3px 0 2px; color: #fff; font-size: 19px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.faction-map-sidebar-head small { color: var(--map-muted); font-size: 11px; }
.faction-map-sidebar-close { display: grid; width: 30px; height: 30px; margin-left: auto; flex: 0 0 30px; place-items: center; border: 1px solid var(--map-line); border-radius: 8px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.045); font-size: 23px; line-height: 1; cursor: pointer; }

.faction-map-admin-switcher { display: flex; align-items: end; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--map-line); background: rgba(78,161,255,.055); }
.faction-map-admin-switcher label { display: grid; min-width: 0; flex: 1; gap: 4px; }
.faction-map-admin-switcher label > span { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.faction-map-admin-switcher select,
.faction-map-admin-switcher input { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; outline: 0; padding: 8px 28px 8px 9px; color: #fff; background: #101820; font-family: inherit; font-size: 11px; font-weight: 800; }
.faction-map-admin-switcher select { cursor: pointer; }
.faction-map-admin-switcher input { padding-right: 9px; }
.faction-map-admin-switcher select:focus,
.faction-map-admin-switcher input:focus { border-color: rgba(78,161,255,.58); box-shadow: 0 0 0 2px rgba(78,161,255,.12); }
.faction-map-admin-switcher button { flex: 0 0 auto; border: 1px solid rgba(78,161,255,.46); border-radius: 7px; padding: 8px 11px; color: #fff; background: rgba(31,105,200,.3); font: inherit; font-size: 9px; font-weight: 900; cursor: pointer; }
.faction-map-admin-switcher a { flex: 0 0 auto; border: 1px solid rgba(78,161,255,.3); border-radius: 7px; padding: 8px 9px; color: #93c4ff; background: rgba(78,161,255,.08); font-size: 9px; font-weight: 900; text-decoration: none; }
.faction-map-player-switcher { flex-wrap: wrap; }
.faction-map-player-switcher label { flex: 0 1 190px; }
.faction-map-player-switcher input { height: 36px; padding-block: 6px; }
.faction-map-player-switcher.is-previewing label { flex-basis: 152px; }
.faction-map-player-switcher.is-previewing { background: rgba(246,195,68,.075); }
.faction-map-player-switcher p { flex: 0 0 100%; margin: 0; color: #ff9b9f; font-size: 10px; line-height: 1.35; }

.faction-map-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 12px 0; border-bottom: 1px solid var(--map-line); }
.faction-map-tabs.has-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faction-map-tabs.has-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faction-map-tabs.has-shop.has-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faction-map-tabs.has-shop.has-items.has-alts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.faction-map-tabs button { position: relative; border: 0; padding: 10px 6px 12px; color: var(--map-muted); background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.faction-map-tabs button span { display: inline-grid; min-width: 19px; height: 19px; margin-left: 4px; place-items: center; border-radius: 999px; color: #ccd7e1; background: rgba(255,255,255,.09); font-size: 10px; }
.faction-map-tabs button::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px; background: transparent; content: ""; }
.faction-map-tabs button.is-active { color: #fff; }
.faction-map-tabs button.is-active::after { background: var(--map-gold); }

.faction-map-tab { display: none; min-height: 0; flex: 1; flex-direction: column; }
.faction-map-tab.is-active { display: flex; }
.faction-map-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; padding: 0 10px; border: 1px solid var(--map-line); border-radius: 9px; background: rgba(0,0,0,.18); }
.faction-map-search > span { color: rgba(255,255,255,.46); font-size: 19px; }
.faction-map-search input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 10px 0; color: #fff; background: transparent; font: inherit; font-size: 12px; }
.faction-map-search input::placeholder { color: rgba(255,255,255,.38); }
.faction-map-search kbd { padding: 2px 5px; border: 1px solid var(--map-line); border-radius: 4px; color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); font-size: 9px; }

.faction-map-filter-row { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 9px; scrollbar-color: rgba(255,255,255,.2) transparent; scrollbar-width: thin; }
.faction-map-filter-row button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; border: 1px solid var(--map-line); border-radius: 999px; padding: 6px 9px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.035); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.faction-map-filter-row button span { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #071016; background: var(--point-color); font-size: 9px; }
.faction-map-filter-row button.is-active { border-color: rgba(246,195,68,.5); color: #fff; background: rgba(246,195,68,.11); }
.faction-map-filter-row::-webkit-scrollbar { height: 4px; }
.faction-map-filter-row::-webkit-scrollbar-track { background: transparent; }
.faction-map-filter-row::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.18); }

.faction-map-add { display: grid; grid-template-columns: 35px 1fr; column-gap: 9px; margin: 0 12px 9px; border: 1px solid rgba(246,195,68,.35); border-radius: 10px; padding: 10px 11px; color: #fff; text-align: left; background: linear-gradient(135deg, rgba(246,195,68,.15), rgba(246,195,68,.06)); cursor: pointer; }
.faction-map-add > span { grid-row: 1 / 3; display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; color: #17130a; background: var(--map-gold); font-size: 23px; font-weight: 500; }
.faction-map-add strong { align-self: end; font-size: 12px; }
.faction-map-add small { align-self: start; margin-top: 2px; color: var(--map-muted); font-size: 9px; }
.faction-map-add.is-active { box-shadow: 0 0 0 2px rgba(246,195,68,.18), 0 0 24px rgba(246,195,68,.1); }

.faction-map-list { min-height: 0; flex: 1; overflow-y: auto; padding: 0 8px 12px; scrollbar-color: rgba(255,255,255,.18) transparent; scrollbar-width: thin; }
.faction-map-list-state { padding: 28px 14px; color: var(--map-muted); text-align: center; font-size: 12px; }
.faction-map-list-item { display: grid; width: 100%; grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 1px solid transparent; border-bottom-color: rgba(255,255,255,.07); border-radius: 8px; padding: 9px 8px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.faction-map-list-item:hover, .faction-map-list-item.is-active { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
.faction-map-list-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 2px solid rgba(255,255,255,.86); border-radius: 50% 50% 50% 10px; color: #081016; background: var(--point-color); box-shadow: 0 2px 7px rgba(0,0,0,.4); font-size: 11px; font-weight: 1000; transform: rotate(-45deg); }
.faction-map-list-icon span { transform: rotate(45deg); }
.faction-map-list-copy { min-width: 0; }
.faction-map-list-copy strong, .faction-map-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faction-map-list-copy strong { color: rgba(255,255,255,.92); font-size: 12px; }
.faction-map-list-copy small { margin-top: 3px; color: var(--map-muted); font-size: 9px; }
.faction-map-list-coords { color: rgba(255,255,255,.45); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }

.faction-map-shop { min-height: 0; }
.faction-map-shop-intro { margin: 12px 12px 9px; border: 1px solid rgba(85,214,139,.22); border-radius: 10px; padding: 11px 12px; background: linear-gradient(135deg, rgba(85,214,139,.1), rgba(246,195,68,.055)); }
.faction-map-shop-intro strong, .faction-map-shop-intro span, .faction-map-shop-intro p { display: block; }
.faction-map-shop-intro strong { color: #fff; font-size: 12px; }
.faction-map-shop-intro span, .faction-map-shop-intro p { margin: 4px 0 0; color: var(--map-muted); font-size: 10px; line-height: 1.42; }
.faction-map-shop-intro a { display: inline-block; margin-top: 7px; color: #8bc5ff; font-size: 9px; font-weight: 900; }
.faction-map-layer-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 9px; border: 0; padding: 0; }
.faction-map-layer-checks legend { width: 100%; margin-bottom: 1px; color: rgba(255,255,255,.42); font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.faction-map-layer-checks label { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 5px 8px; color: rgba(255,255,255,.74); background: rgba(255,255,255,.035); font-size: 9px; font-weight: 800; cursor: pointer; }
.faction-map-layer-checks label:has(input:checked) { border-color: rgba(85,214,139,.34); color: #fff; background: rgba(85,214,139,.09); }
.faction-map-layer-checks input { width: 12px; height: 12px; margin: 0; accent-color: #55d68b; }
.faction-map-world-layers { align-items: center; }
.faction-map-world-layers label:has(input:checked) { border-color: rgba(230,171,56,.44); background: rgba(230,171,56,.1); }
.faction-map-world-layers b { margin-left: 2px; color: #ffd36a; font-size: 8px; }
.faction-map-world-layers > a { margin-left: auto; color: #8bc5ff; font-size: 8px; font-weight: 900; text-decoration: none; }
.faction-map-world-layers > a:hover { color: #fff; text-decoration: underline; }
.faction-map-shop-list { min-height: 0; flex: 1; overflow-y: auto; padding: 0 8px 12px; scrollbar-color: rgba(255,255,255,.18) transparent; scrollbar-width: thin; }
.faction-map-shop-group { display: flex; align-items: center; gap: 7px; padding: 10px 8px 6px; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .03em; }
.faction-map-shop-group span { font-size: 13px; }
.faction-map-shop-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; border: 1px solid transparent; border-bottom-color: rgba(255,255,255,.07); border-radius: 8px; }
.faction-map-shop-item:hover, .faction-map-shop-item.is-active { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
.faction-map-shop-view { display: grid; min-width: 0; grid-template-columns: 31px minmax(0,1fr) auto; gap: 8px; align-items: center; border: 0; padding: 9px 5px 9px 8px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.faction-map-shop-list-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; color: #081016; background: var(--shop-point-color); box-shadow: 0 2px 7px rgba(0,0,0,.38); font-size: 12px; }
.faction-map-shop-list-copy { min-width: 0; }
.faction-map-shop-list-copy strong, .faction-map-shop-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faction-map-shop-list-copy strong { color: rgba(255,255,255,.94); font-size: 11px; }
.faction-map-shop-list-copy small { margin-top: 3px; color: var(--map-muted); font-size: 8px; }
.faction-map-shop-view code { color: rgba(255,255,255,.46); font-size: 8px; white-space: nowrap; }
.faction-map-shop-delete { margin-right: 6px; border: 1px solid rgba(255,92,100,.24); border-radius: 6px; padding: 5px 6px; color: #ff9da2; background: rgba(255,92,100,.055); font: inherit; font-size: 8px; font-weight: 900; cursor: pointer; }
.faction-map-shop-delete:hover { border-color: rgba(255,92,100,.5); color: #fff; background: rgba(255,92,100,.18); }

.faction-map-guide { gap: 8px; overflow-y: auto; padding: 15px; }
.faction-map-guide article { display: grid; grid-template-columns: 32px 1fr; gap: 9px; padding: 11px; border: 1px solid var(--map-line); border-radius: 10px; background: rgba(255,255,255,.035); }
.faction-map-guide article > span { color: var(--map-gold); font: 900 11px ui-monospace, monospace; }
.faction-map-guide strong { color: #fff; font-size: 12px; }
.faction-map-guide p { margin: 3px 0 0; color: var(--map-muted); font-size: 11px; line-height: 1.45; }
.faction-map-permissions { margin-top: 3px; padding: 13px; border-left: 2px solid var(--map-blue); border-radius: 0 9px 9px 0; background: rgba(78,161,255,.08); }
.faction-map-sidebar-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 13px; border-top: 1px solid var(--map-line); color: var(--map-muted); font-size: 10px; }
.faction-map-sidebar-foot span { display: flex; align-items: center; gap: 6px; }
.faction-map-sidebar-foot i, .faction-map-load i { width: 7px; height: 7px; border-radius: 50%; background: #55d68b; box-shadow: 0 0 8px rgba(85,214,139,.75); }
.faction-map-sidebar-foot button { border: 0; color: rgba(255,255,255,.68); background: transparent; font: inherit; font-weight: 800; cursor: pointer; }

.faction-map-viewport { position: absolute; top: 0; right: 0; bottom: 0; left: var(--map-sidebar-lane); min-width: 0; overflow: hidden; background: #a9c8e3; cursor: grab; touch-action: none; user-select: none; overscroll-behavior: contain; }
.faction-map-app.is-panel-collapsed .faction-map-viewport { left: 0; }
.faction-map-viewport.is-dragging { cursor: grabbing; }
.faction-map-viewport.is-holding { cursor: crosshair; }
.faction-map-viewport.is-placing { cursor: crosshair; }
.faction-map-scene { position: absolute; top: 0; left: 0; width: 14814px; height: 14812px; overflow: hidden; transform-origin: 0 0; will-change: transform; }
.faction-map-overview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.faction-map-tiles, .faction-map-markers, .faction-map-shop-markers, .faction-map-alt-markers, .faction-map-bounty-markers, .faction-map-inventory-markers, .faction-map-base-markers, .faction-map-coordinate-targets { position: absolute; inset: 0; pointer-events: none; }
.faction-map-tile { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.faction-map-app.is-screen-raster .faction-map-overview { right: auto; bottom: auto; max-width: none; }
.faction-map-app.is-screen-raster .faction-map-marker { transform: translate(-50%, -100%) rotate(-45deg); }
.faction-map-app.is-screen-raster .faction-map-shop-marker { transform: translate(-50%, -50%); }
.faction-map-app.is-screen-raster .faction-map-alt-marker { transform: translate(-50%, -50%); }
.faction-map-app.is-screen-raster .faction-map-bounty-marker { transform: translate(-50%, -100%) rotate(-45deg); }
.faction-map-app.is-screen-raster .faction-map-inventory-marker { transform: translate(-50%, -50%); }
.faction-map-app.is-screen-raster .faction-map-base-marker { transform: translate(-50%, -50%); }
.faction-map-marker { position: absolute; z-index: 3; display: grid; width: 26px; height: 26px; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 7px; color: #081016; background: var(--point-color); box-shadow: 0 3px 9px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.25); font: 1000 10px ui-sans-serif, sans-serif; pointer-events: auto; cursor: pointer; transform: translate(-50%, -100%) rotate(-45deg) scale(var(--marker-scale,1)); transform-origin: 50% 100%; }
.faction-map-marker > span { transform: rotate(45deg); }
.faction-map-marker:hover, .faction-map-marker.is-active { z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,.7), 0 0 0 4px rgba(255,255,255,.24); }
.faction-map-marker.is-mine::after { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; border: 1.5px solid #fff; border-radius: 50%; background: #55d68b; content: ""; }
.faction-map-shop-marker { position: absolute; z-index: 4; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #081016; background: var(--shop-point-color); box-shadow: 0 3px 9px rgba(0,0,0,.64), 0 0 0 1px rgba(0,0,0,.25); pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%) scale(var(--marker-scale,1)); transform-origin: center; }
.faction-map-shop-marker span { font-size: 10px; line-height: 1; }
.faction-map-shop-marker.is-saved { border-radius: 7px; }
.faction-map-shop-marker:hover, .faction-map-shop-marker.is-active { z-index: 6; box-shadow: 0 4px 14px rgba(0,0,0,.72), 0 0 0 4px rgba(255,255,255,.28); }
.faction-map-alt-marker { position: absolute; z-index: 5; display: grid; width: 18px; height: 18px; padding: 0; place-items: center; border: 1.5px solid #fff; border-radius: 50%; color: #0b0b15; background: var(--alt-point-color, #a78bfa); box-shadow: 0 2px 7px rgba(0,0,0,.68), 0 0 0 1px rgba(0,0,0,.24); pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%) scale(var(--marker-scale,1)); transform-origin: center; }
.faction-map-alt-marker span { font-size: 8px; font-weight: 1000; line-height: 1; }
.faction-map-alt-marker:hover, .faction-map-alt-marker.is-active { z-index: 8; box-shadow: 0 3px 11px rgba(0,0,0,.74), 0 0 0 3px rgba(167,139,250,.34); }
.faction-map-bounty-marker { position: absolute; z-index: 6; display: grid; width: 21px; height: 21px; padding: 0; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 6px; color: #1b1005; background: #e6ab38; box-shadow: 0 3px 10px rgba(0,0,0,.68), 0 0 15px rgba(230,171,56,.48); pointer-events: auto; cursor: pointer; transform: translate(-50%, -100%) rotate(-45deg) scale(var(--marker-scale,1)); transform-origin: 50% 100%; }
.faction-map-bounty-marker > span { font-size: 8px; line-height: 1; transform: rotate(45deg); }
.faction-map-bounty-marker::after { position: absolute; right: -4px; bottom: -4px; width: 6px; height: 6px; border: 1.5px solid #fff; border-radius: 50%; background: #e95454; content: ""; }
.faction-map-bounty-marker.is-online::after { background: #42dc82; box-shadow: 0 0 9px #42dc82; }
.faction-map-bounty-marker.is-offline { opacity: .8; filter: saturate(.72); }
.faction-map-bounty-marker:hover, .faction-map-bounty-marker.is-active { z-index: 9; opacity: 1; filter: none; box-shadow: 0 4px 14px rgba(0,0,0,.72), 0 0 0 4px rgba(230,171,56,.28); }
.faction-map-alt-view:disabled { opacity: .55; cursor: default; }
.faction-map-alt-view .faction-map-shop-list-icon { background: #a78bfa; font-size: 10px; font-weight: 1000; }
.faction-map-inventory-marker { position: absolute; z-index: 5; display: grid; width: 13px; height: 13px; place-items: center; border: 1.5px solid #fff; border-radius: 4px; color: #081016; background: var(--inventory-point-color); box-shadow: 0 2px 6px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.2); pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%) scale(var(--marker-scale,1)); transform-origin: center; }
.faction-map-inventory-marker::before { position: absolute; inset: -8px; content: ""; }
.faction-map-inventory-marker > span { font-size: 6px; font-weight: 1000; line-height: 1; }
.faction-map-inventory-marker.is-vehicle { padding: 0; border-radius: 50%; }
.faction-map-inventory-marker.is-vehicle > span { font-size: 10px; }
.faction-map-inventory-marker.is-animal { border-radius: 50% 50% 50% 3px; transform: translate(-50%, -50%) rotate(-45deg) scale(var(--marker-scale,1)); }
.faction-map-inventory-marker.is-animal > span { transform: rotate(45deg); }
.faction-map-app.is-screen-raster .faction-map-inventory-marker.is-animal { transform: translate(-50%, -50%) rotate(-45deg); }
.faction-map-inventory-marker:hover, .faction-map-inventory-marker.is-active { z-index: 8; box-shadow: 0 3px 10px rgba(0,0,0,.72), 0 0 0 3px rgba(255,255,255,.28); }
.faction-map-base-marker { position: absolute; z-index: 9; display: grid; width: 13px; height: 13px; place-items: center; border: 1px solid #fff; border-radius: 4px; color: #07151a; background: #50bfd4; box-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 0 1px rgba(4,53,63,.55), 0 0 9px rgba(80,191,212,.48); pointer-events: auto; cursor: pointer; transform: translate(-50%,-50%) scale(var(--marker-scale,1)); transform-origin: center; }
.faction-map-base-marker > span { font-size: 7px; line-height: 1; }
.faction-map-marker::before, .faction-map-shop-marker::before, .faction-map-alt-marker::before, .faction-map-bounty-marker::before, .faction-map-base-marker::before { position: absolute; inset: -7px; content: ""; }
.faction-map-base-marker:hover, .faction-map-base-marker.is-active { z-index: 12; box-shadow: 0 4px 14px rgba(0,0,0,.76), 0 0 0 4px rgba(80,191,212,.34); }
.faction-map-coordinate-targets { z-index: 11; }
.faction-map-coordinate-target { position: absolute; width: 46px; height: 46px; transform: translate(-50%,-50%) scale(var(--target-marker-scale,1)); transform-origin: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(255,255,255,.78)); will-change: left, top, transform; }
.faction-map-coordinate-target::before, .faction-map-coordinate-target::after { position: absolute; top: 20px; left: -3px; width: 52px; height: 6px; border: 1px solid rgba(255,255,255,.92); border-radius: 999px; background: #e21f2f; box-shadow: inset 0 0 0 1px rgba(91,0,8,.28); content: ""; }
.faction-map-coordinate-target::before { transform: rotate(45deg); }
.faction-map-coordinate-target::after { transform: rotate(-45deg); }

.faction-map-topbar { position: absolute; z-index: 15; top: 12px; right: 60px; left: 12px; display: flex; align-items: center; gap: 7px; min-width: 0; pointer-events: none; }
.faction-map-panel-toggle { display: none; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #fff; background: rgba(10,16,21,.88); box-shadow: 0 5px 18px rgba(0,0,0,.25); pointer-events: auto; font-size: 17px; cursor: pointer; }
.faction-map-app.is-panel-collapsed .faction-map-panel-toggle { display: grid; }
.faction-map-coordinate, .faction-map-load { padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #f1f5f8; background: rgba(10,16,21,.84); box-shadow: 0 5px 18px rgba(0,0,0,.25); backdrop-filter: blur(8px); }
.faction-map-coordinate span, .faction-map-coordinate small { display: block; }
.faction-map-coordinate { min-width: 0; }
.faction-map-coordinate span { overflow: hidden; font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.faction-map-coordinate small { margin-top: 2px; color: rgba(255,255,255,.48); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.faction-map-load { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: 9px; }
.faction-map-load.is-loading i { background: var(--map-gold); animation: faction-map-pulse 900ms ease-in-out infinite alternate; }
@keyframes faction-map-pulse { to { opacity: .32; } }

.faction-map-controls { position: absolute; z-index: 15; top: 12px; right: 12px; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.faction-map-controls button { display: grid; width: 37px; height: 37px; place-items: center; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; background: rgba(10,16,21,.87); font: 700 20px ui-sans-serif, sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.faction-map-controls button:last-child { border-bottom: 0; }
.faction-map-controls #mapFit { font-size: 16px; }
.faction-map-controls #mapFullWindow { font-size: 18px; }
.faction-map-controls #mapFullWindow.is-active { color: #17130a; background: var(--map-gold); }
.faction-map-controls button:hover { background: rgba(34,45,55,.95); }
.faction-map-quick-add { position: absolute; z-index: 15; top: 175px; right: 12px; display: grid; width: 82px; gap: 2px; justify-items: center; border: 1px solid rgba(246,195,68,.52); border-radius: 10px; padding: 8px 6px; color: #19140a; background: rgba(246,195,68,.94); box-shadow: 0 7px 22px rgba(0,0,0,.28); cursor: pointer; }
.faction-map-quick-add span { font-size: 19px; line-height: 1; }
.faction-map-quick-add strong { font-size: 9px; }
.faction-map-quick-add.is-active { color: #fff; background: rgba(16,22,27,.93); box-shadow: 0 0 0 2px rgba(246,195,68,.22), 0 7px 22px rgba(0,0,0,.3); }
.faction-map-scale { position: absolute; z-index: 12; right: 12px; bottom: 12px; min-width: 72px; border-bottom: 2px solid rgba(13,24,31,.8); padding: 0 4px 3px; color: #0c171e; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.75); font: 900 10px ui-monospace, monospace; }
.faction-map-scale::before, .faction-map-scale::after { position: absolute; bottom: -2px; width: 2px; height: 7px; background: rgba(13,24,31,.8); content: ""; }
.faction-map-scale::before { left: 0; } .faction-map-scale::after { right: 0; }
.faction-map-crosshair { position: absolute; z-index: 10; top: 50%; left: 50%; width: 20px; height: 20px; opacity: 0; pointer-events: none; transform: translate(-50%,-50%); transition: opacity .15s; }
.faction-map-crosshair::before, .faction-map-crosshair::after { position: absolute; background: rgba(10,18,24,.68); content: ""; }
.faction-map-crosshair::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faction-map-crosshair::after { top: 0; left: 9px; width: 2px; height: 20px; }
.faction-map-viewport:hover .faction-map-crosshair { opacity: .55; }
.faction-map-viewport.is-placing .faction-map-crosshair { opacity: 1; }
.faction-map-long-press { position: absolute; z-index: 22; display: grid; width: 68px; height: 68px; place-items: center; pointer-events: none; transform: translate(-50%,-50%); }
.faction-map-long-press > span { grid-area: 1 / 1; width: 52px; height: 52px; border: 4px solid rgba(246,195,68,.34); border-top-color: var(--map-gold); border-right-color: rgba(246,195,68,.75); border-radius: 50%; background: radial-gradient(circle, rgba(246,195,68,.13), rgba(12,18,23,.48)); box-shadow: 0 0 0 5px rgba(12,18,23,.2), 0 7px 24px rgba(0,0,0,.28); animation: faction-map-hold var(--hold-duration, 575ms) linear forwards; }
.faction-map-long-press small { grid-area: 1 / 1; margin-top: 84px; width: max-content; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 5px 8px; color: #fff; background: rgba(11,17,22,.94); box-shadow: 0 4px 14px rgba(0,0,0,.24); font-size: 9px; font-weight: 900; }
.faction-map-long-press.is-ready > span { border-color: #55d68b; background: rgba(85,214,139,.3); box-shadow: 0 0 0 7px rgba(85,214,139,.14), 0 7px 24px rgba(0,0,0,.28); animation: none; transform: scale(.86); }
.faction-map-long-press.is-ready small { color: #07150d; background: #55d68b; }
@keyframes faction-map-hold { from { transform: scale(.68) rotate(0); } to { transform: scale(1) rotate(360deg); } }

.faction-map-mode { position: absolute; z-index: 18; top: 78px; left: 50%; display: grid; grid-template-columns: auto auto; gap: 1px 12px; align-items: center; border: 1px solid rgba(246,195,68,.46); border-radius: 10px; padding: 9px 10px 9px 13px; color: #fff; background: rgba(16,20,20,.93); box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: translateX(-50%); }
.faction-map-mode strong { font-size: 11px; }
.faction-map-mode span { grid-row: 2; color: var(--map-muted); font-size: 9px; }
.faction-map-mode button { grid-row: 1 / 3; grid-column: 2; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; padding: 6px 8px; color: #fff; background: rgba(255,255,255,.06); font: inherit; font-size: 9px; cursor: pointer; }

.faction-map-selection { position: absolute; z-index: 20; right: 60px; bottom: 16px; width: min(330px, calc(100% - 32px)); border: 1px solid rgba(255,255,255,.16); border-radius: 13px; padding: 15px; color: #fff; background: rgba(14,21,27,.95); box-shadow: 0 18px 50px rgba(0,0,0,.4); backdrop-filter: blur(12px); user-select: text; }
.faction-map-selection-close { position: absolute; top: 8px; right: 8px; border: 0; color: rgba(255,255,255,.65); background: transparent; font-size: 21px; cursor: pointer; }
.faction-map-selection-type { display: flex; align-items: center; gap: 7px; }
.faction-map-selection-type > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #081016; background: var(--point-color, var(--map-gold)); font-size: 10px; font-weight: 1000; }
.faction-map-selection-type small { color: var(--map-gold); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.faction-map-selection h2 { margin: 10px 28px 6px 0; font-size: 17px; }
.faction-map-selection p { margin: 0 0 10px; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.45; white-space: pre-wrap; }
.faction-map-selection-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; color: rgba(255,255,255,.48); font-size: 9px; }
.faction-map-selection-actions { display: flex; gap: 7px; margin-top: 12px; }
.faction-map-selection-actions button, .faction-map-selection-actions a { display: inline-flex; min-height: 31px; flex: 1 1 auto; align-items: center; justify-content: center; border: 1px solid var(--map-line); border-radius: 7px; padding: 7px 8px; color: #fff; text-align: center; text-decoration: none; background: rgba(255,255,255,.06); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.faction-map-selection-actions [hidden] { display: none; }
.faction-map-selection-actions button:disabled { opacity: .55; cursor: wait; }
.faction-map-selection-actions #mapSelectionEdit, .faction-map-selection-actions #mapSelectionShare { border-color: rgba(246,195,68,.4); color: #17130a; background: var(--map-gold); }

.faction-map-dialog { width: min(520px, calc(100% - 24px)); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 0; color: #edf2f6; background: #121b23; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.faction-map-dialog::backdrop { background: rgba(3,7,10,.76); backdrop-filter: blur(4px); }
.faction-map-dialog form { display: grid; gap: 13px; padding: 18px; }
.faction-map-dialog header { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; padding-bottom: 11px; border-bottom: 1px solid var(--map-line); }
.faction-map-dialog header span { color: var(--map-gold); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.faction-map-dialog h2 { margin: 3px 0 0; color: #fff; font-size: 20px; }
.faction-map-dialog-close { border: 0; color: rgba(255,255,255,.7); background: transparent; font-size: 25px; cursor: pointer; }
.faction-map-dialog label { position: relative; display: grid; gap: 6px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; }
.faction-map-dialog input, .faction-map-dialog select, .faction-map-dialog textarea { width: 100%; border: 1px solid var(--map-line); border-radius: 8px; outline: 0; padding: 10px 11px; color: #fff; background: rgba(0,0,0,.22); font: inherit; font-size: 12px; }
.faction-map-dialog input:focus, .faction-map-dialog select:focus, .faction-map-dialog textarea:focus { border-color: rgba(246,195,68,.55); box-shadow: 0 0 0 2px rgba(246,195,68,.1); }
.faction-map-dialog textarea { resize: vertical; min-height: 82px; }
.faction-map-dialog label > small { position: absolute; right: 7px; bottom: 6px; color: rgba(255,255,255,.32); font-size: 8px; }
.faction-map-coordinate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faction-map-use-center { justify-self: start; margin-top: -5px; border: 0; padding: 0; color: var(--map-blue); background: transparent; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.faction-map-dialog-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding-top: 4px; }
.faction-map-dialog-actions button { border: 1px solid var(--map-line); border-radius: 8px; padding: 9px 12px; color: #fff; background: rgba(255,255,255,.06); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.faction-map-dialog-actions .faction-map-save { border-color: rgba(246,195,68,.5); color: #17130a; background: var(--map-gold); }
.faction-map-dialog-actions .faction-map-delete { border-color: rgba(255,92,100,.35); color: #ff8f95; }

.faction-map-toast { position: fixed; z-index: 10020; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); max-width: min(390px, calc(100% - 36px)); border: 1px solid rgba(255,255,255,.15); border-left: 3px solid #55d68b; border-radius: 9px; padding: 11px 14px; color: #fff; background: rgba(15,23,29,.96); box-shadow: 0 12px 35px rgba(0,0,0,.4); font-size: 11px; font-weight: 700; }
.faction-map-toast.is-error { border-left-color: #ff5c64; }
.faction-map-toast.is-copy-flash { animation: faction-map-copy-flash .42s ease-out; }
@keyframes faction-map-copy-flash { 0% { transform: translateY(8px) scale(.98); opacity: .3; box-shadow: 0 0 0 0 rgba(85,214,139,.55); } 55% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 0 0 7px rgba(85,214,139,.08); } 100% { box-shadow: 0 12px 35px rgba(0,0,0,.4); } }

.faction-map-gate { position: relative; display: grid; min-height: min(680px, calc(100dvh - 150px)); place-items: center; align-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; padding: 50px 24px; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(246,195,68,.13), transparent 35%), linear-gradient(145deg, rgba(27,38,48,.96), rgba(8,13,18,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.faction-map-gate::before { position: absolute; inset: 0; opacity: .14; background: url('/assets/maps/chernarus_radar_overview_2048_clean.webp') center/cover; filter: grayscale(1) contrast(1.3); content: ""; }
.faction-map-gate > * { position: relative; z-index: 1; }
.faction-map-gate-art { display: grid; width: 86px; height: 86px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(246,195,68,.35); border-radius: 50%; color: var(--map-gold); background: rgba(5,10,14,.76); box-shadow: 0 0 0 12px rgba(246,195,68,.04); font-size: 36px; }
.faction-map-gate-kicker { color: var(--map-gold); font-size: 10px; font-weight: 1000; letter-spacing: .18em; }
.faction-map-gate h1 { max-width: 660px; margin: 9px 0 12px; color: #fff; font-size: clamp(30px, 5vw, 52px); line-height: 1.02; }
.faction-map-gate p { max-width: 610px; margin: 0; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.6; }
.faction-map-gate-action { display: inline-flex; align-items: center; gap: 16px; margin-top: 25px; border: 1px solid rgba(246,195,68,.45); border-radius: 10px; padding: 12px 17px; color: #19140a; background: var(--map-gold); font-size: 12px; font-weight: 950; box-shadow: 0 10px 30px rgba(246,195,68,.13); }
.faction-map-gate small { margin-top: 14px; color: rgba(255,255,255,.43); font-size: 10px; }

@media (max-width: 900px) {
  .faction-map-site-shell { width: min(100%, calc(100% - 12px)); }
  .faction-map-app { --map-sidebar-lane: 320px; }
  .faction-map-sidebar { width: 296px; }
}

@media (max-width: 1100px) {
  .faction-map-load { display: none; }
}

@media (min-width: 721px) {
  .faction-map-filter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-bottom: 11px; scrollbar-width: none; }
  .faction-map-filter-row::-webkit-scrollbar { display: none; }
  .faction-map-filter-row button { width: 100%; min-width: 0; justify-content: center; padding: 6px 5px; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; }
  .faction-map-filter-row button:hover { border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.9); background: rgba(255,255,255,.075); transform: translateY(-1px); }
  .faction-map-filter-row button.is-active:hover { border-color: rgba(246,195,68,.62); background: rgba(246,195,68,.15); }
}

@media (min-width: 721px) and (max-width: 900px) {
  .faction-map-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .faction-map-page { overflow: hidden; }
  .faction-map-site-shell { width: 100%; padding: 0 0 calc(64px + env(safe-area-inset-bottom)); }
  .faction-map-site-shell .site-header { margin: 0 6px 6px; }
  .faction-map-app { --map-sidebar-lane: 0px; display: block; height: calc(100dvh - 94px - env(safe-area-inset-bottom)); min-height: 480px; max-height: none; border-right: 0; border-left: 0; border-radius: 0; }
  .faction-map-sidebar { top: 0; bottom: 0; left: 0; width: min(88vw, 340px); border-width: 0 1px 0 0; border-radius: 0; opacity: 1; transform: translateX(-104%); transition: transform .2s ease; }
  .faction-map-app.is-panel-collapsed .faction-map-sidebar { opacity: 1; transform: translateX(-104%); }
  .faction-map-app.is-panel-open .faction-map-sidebar { transform: translateX(0); }
  .faction-map-app.is-panel-open::after { position: absolute; z-index: 25; inset: 0; background: rgba(0,0,0,.48); content: ""; }
  .faction-map-sidebar-close, .faction-map-panel-toggle, .faction-map-app.is-panel-collapsed .faction-map-panel-toggle { display: grid; place-items: center; }
  .faction-map-sidebar-close { font-size: 0; }
  .faction-map-sidebar-close::after { content: "×"; font-size: 23px; }
  .faction-map-topbar, .faction-map-app.is-panel-collapsed .faction-map-topbar { right: 60px; left: 12px; }
  .faction-map-coordinate { padding: 6px 8px; }
  .faction-map-coordinate span { font-size: 10px; }
  .faction-map-viewport, .faction-map-app.is-panel-collapsed .faction-map-viewport { left: 0; width: 100%; height: 100%; }
  .faction-map-load { display: none; }
  .faction-map-controls { top: 60px; }
  .faction-map-quick-add { top: 220px; width: 46px; padding: 8px 4px; }
  .faction-map-quick-add strong { font-size: 0; }
  .faction-map-quick-add strong::after { content: "Point"; font-size: 8px; }
  .faction-map-mode { top: 62px; width: max-content; max-width: calc(100% - 120px); }
  .faction-map-selection { right: 10px; bottom: 12px; left: 10px; width: auto; }
  .faction-map-scale { bottom: 9px; }
  .faction-map-gate { min-height: calc(100dvh - 150px); margin: 0 6px; border-radius: 15px; }
  .faction-map-dialog { margin-top: auto; margin-bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 16px 16px 10px 10px; }
}

@media (max-width: 420px) {
  .faction-map-topbar { gap: 5px; }
  .faction-map-panel-toggle { width: 36px; height: 36px; }
  .faction-map-coordinate small { display: none; }
  .faction-map-coordinate-fields { grid-template-columns: 1fr; }
  .faction-map-dialog form { gap: 10px; padding: 14px; }
  .faction-map-dialog-actions { grid-template-columns: auto 1fr auto; }
  .faction-map-dialog-actions > span { display: none; }
  .faction-map-dialog-actions .faction-map-save { grid-column: 3; }
  .faction-map-selection-actions { flex-wrap: wrap; }
  .faction-map-tabs button { padding-right: 3px; padding-left: 3px; font-size: 11px; }
  .faction-map-tabs button span { min-width: 17px; height: 17px; margin-left: 2px; }
  .faction-map-shop-view { grid-template-columns: 31px minmax(0,1fr); }
  .faction-map-shop-view code { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faction-map-sidebar { transition: none; }
  .faction-map-load.is-loading i { animation: none; }
}