:root{
      --bg:#0000006c;
      --bg2:#1e1e1e;
      --bg3:#b100006e;
      --panel:#1a1a1a;
      --panel2:#232323;
      --txt:#eeeeee;
      --muted:#b4b4b4;
      --line:#3a3a3a;
      --accent:#b2b2b2;
      --accent2:#b8b8b8;
      --danger:#c40000ee;
      --shadow:0 10px 26px rgba(0,0,0,.35);
      --radius:12px;
      --btn:44px;
      --tools-w:340px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);color:var(--txt);font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    body{overflow:hidden}
    #app{height:100%;width:100%;position:relative;background:var(--bg)}
    #map{position:absolute;inset:0;background:#212121}
    .leaflet-container{background:#212121;color:var(--txt)}
    .leaflet-control-zoom a{background:var(--panel2);color:var(--txt);border-color:var(--line)!important}
    .leaflet-control-zoom a:hover{background:#383838}
    .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel2);color:var(--txt)}
    .leaflet-bar a,.leaflet-bar a:hover{background:var(--panel2);color:var(--txt);border-bottom-color:var(--line)}

    .float-stack{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;z-index:1300}
    .fab{
      width:var(--btn);height:var(--btn);border-radius:12px;border:1px solid var(--line);
      background:rgba(26,26,26,.96);color:var(--txt);display:grid;place-items:center;cursor:pointer;
      box-shadow:var(--shadow);font-size:20px;user-select:none
    }
    .fab:hover{background:#272727}
    .fab.active{outline:2px solid rgba(178,178,178,.35);border-color:#ff0000;background:#272727}
    .fab svg{width:20px;height:20px;display:block}

    .maps-card{width:246px}
    .maps-card .radio-group{flex-wrap:nowrap}
    .maps-card .radio-pill span{padding:6px 8px}
    .placement-flyout{
      position:fixed;left:64px;bottom:12px;top:auto;width:300px;
      max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain
    }
    .placement-storage summary{cursor:pointer;color:var(--muted);font-size:12px;user-select:none}
    .tool-tipline{color:var(--muted);line-height:1.3}
    .shape-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
    .shape-choice{
      border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:8px;
      padding:7px 6px;cursor:pointer;font-weight:700;font-size:12px
    }
    .shape-choice:hover{background:#383838}
    .shape-choice.active{background:#3c3c3c;border-color:#fd0000;box-shadow:0 0 0 1px rgba(178,178,178,.18) inset}
    .shape-preview{pointer-events:none}
    .item-editor{
      position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:1360;
      width:min(590px,calc(100vw - 32px));max-height:min(48vh,430px);overflow:auto;
      background:#141414;border:1px solid #383838;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.48)
    }
    .item-editor[hidden]{display:none!important}
    .item-editor-head{
      position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:10px 12px;background:#141414;border-bottom:1px solid #383838
    }
    .item-editor-head strong{font-size:15px}
    .item-editor-body{padding:11px 12px 12px}
    .editor-action{border:0;background:transparent;color:var(--txt);font-weight:800;cursor:pointer;padding:6px 4px}
    .editor-action.delete{color:#e44800}.editor-action.save{color:#c7c7c7}
    .editor-shape-picker{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px}
    .edit-help{margin-top:8px;color:var(--muted);font-size:11px}
    .vertex-icon{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #aaaaaa;box-shadow:0 1px 8px rgba(0,0,0,.75)}
    .measure-label{position:relative;z-index:2}
    .coordsbar{display:flex}
    .leaflet-top.leaflet-left{left:10px;right:auto}
    .leaflet-top.leaflet-right{right:10px;left:auto}

    .quick-card{
      width:212px;background:rgba(26,26,26,.96);border:1px solid var(--line);border-radius:8px;
      padding:8px;box-shadow:var(--shadow)
    }
    .maps-card summary{cursor:pointer;font-weight:700;user-select:none}
    .tool-cluster{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
    .placement-fab.active{outline:2px solid rgba(255, 0, 0, 0.35);border-color:#ff0000;background:#272727}
    .radar-fab svg{color:#8f8f8f}
    .placement-flyout{
      width:260px;background:rgba(26,26,26,.98);border:1px solid var(--line);border-radius:12px;
      box-shadow:var(--shadow);padding:9px;display:flex;flex-direction:column;gap:8px
    }
    .placement-flyout[hidden]{display:none!important}
    .command-panel .panel-body{padding:10px}
    .command-panel .tool-card{background:transparent;border:0;border-radius:0;padding:0}
    .command-panel textarea{min-height:146px}

    .side-panel{
      position:absolute;top:12px;right:12px;bottom:12px;width:min(var(--tools-w),calc(100vw - 76px));
      background:rgba(26,26,26,.98);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
      display:none;flex-direction:column;overflow:hidden;z-index:1250
    }
    .side-panel.open{display:flex}
    .panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);background:#030303}
    .panel-title{font-weight:700;letter-spacing:.2px}
    .panel-sub{font-size:12px;color:var(--muted)}
    .panel-body{padding:10px;overflow:auto;display:flex;flex-direction:column;gap:10px}

    .card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px}
    .card h3{margin:0 0 6px;font-size:13px}
    .row{display:flex;gap:8px;align-items:center}
    .row.wrap{flex-wrap:wrap}
    .row > *{min-width:0}
    .grow{flex:1}
    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
    .stack{display:flex;flex-direction:column;gap:6px}
    .tiny{font-size:11px;color:var(--muted)}
    .hintbar{margin-top:6px;padding:6px 8px;border:1px dashed var(--line);border-radius:8px;background:#161616;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}
    .pm-point .poly-only{display:none !important}

    .tool-card[hidden], [hidden]{display:none !important}
    .measure-tooltip{background:#262626!important;color:#ececec!important;border:1px solid #ff0000!important;box-shadow:0 2px 8px rgba(0,0,0,.35)!important;font-weight:700}
    .measure-tooltip:before{display:none!important}
    #radarOutputBox{min-height:92px}
    #shapeControls{padding-top:4px}
    .command-panel{bottom:auto;max-height:calc(100vh - 24px);height:auto}
    .command-panel .panel-body{max-height:calc(100vh - 78px);overflow:auto}
    .measure-label-wrap{background:transparent!important;border:0!important}
    .measure-label{
      display:inline-block;transform:translate(-50%,-50%);padding:5px 8px;border-radius:7px;
      background:rgba(2, 2, 2, 0.96);color:#f3f3f3;border:1px solid #9c9c9c;
      box-shadow:0 2px 9px rgba(0,0,0,.45);font-weight:800;font-size:12px;
      line-height:1;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.7)
    }
    .stepper{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:4px;align-items:center}
    .stepper .btn{padding:6px 0;font-size:16px;line-height:1}

    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

    label.lbl{display:block;font-size:12px;color:var(--muted);margin:0 0 4px}
    .radio-group{display:flex;gap:6px;flex-wrap:wrap}
    .radio-pill{position:relative;display:inline-flex;align-items:center}
    .radio-pill input{position:absolute;opacity:0;pointer-events:none}
    .radio-pill span{
      display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid var(--line);
      background:var(--panel2);cursor:pointer;font-weight:600
    }
    .radio-pill input:checked + span{background:#383838;border-color:#ff0000;color:#f4f4f4}

    input[type="text"], input[type="number"], textarea, select{
      width:100%;background:#161616;color:var(--txt);border:1px solid var(--line);border-radius:8px;
      padding:7px 8px;outline:none
    }
    input[type="number"]{appearance:textfield}
    input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{appearance:none;margin:0}
    textarea{min-height:146px;resize:vertical}
    button.btn{
      border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:8px;
      padding:7px 9px;cursor:pointer;font-weight:600
    }
    button.btn:hover{background:#0c0a0a}
    button.btn.accent{background:#3c3c3c;border-color:#007c92}
    button.btn.good{background:#3a3a3a;border-color:#1eff00}
    button.btn.warn{background:#5c1111;border-color:#ff0000b4}
    .seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#161616}
    .seg button{flex:1;border:0;background:transparent;color:var(--txt);padding:7px 8px;cursor:pointer}
    .seg button.active{background:#383838}
    .chk{display:flex;align-items:center;gap:8px;font-size:13px}
    .chk input{accent-color:#f70101}
    .coordsbar{
      position:absolute;left:12px;bottom:12px;z-index:1200;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
      background:rgba(0,0,0,0);padding:8px 10px;
    }
    .badge{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#222222;border-radius:999px;padding:4px 8px;font-size:12px;white-space:nowrap}
    .kbd{border:1px solid var(--line);background:#161616;border-bottom-width:2px;border-radius:6px;padding:1px 6px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}

    .legend-list{display:flex;flex-direction:column;gap:8px}
    .legend-cat{border:1px solid var(--line);background:var(--bg2);border-radius:10px;overflow:hidden}
    .legend-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#202020;border-bottom:1px solid var(--line)}
    .legend-items{padding:8px;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
    .legend-item{display:flex;align-items:center;gap:8px}
    .legend-item img{width:18px;height:18px;object-fit:contain;background:#111;border-radius:4px;border:1px solid #0003}
    .swatch{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.55) inset}

    .overlay-icon-wrap{background:transparent;border:none;display:flex;align-items:center;gap:4px;white-space:nowrap;pointer-events:auto}
    .overlay-dot{
      width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;
      border:2px solid rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.55) inset;background:#969696
    }
    .overlay-dot.town{width:16px;height:16px;border-radius:4px;background:#bebebe;font-size:9px}
    .town-text-label{color:#bebebe;font-weight:800;font-size:12px;line-height:1;letter-spacing:.2px;white-space:nowrap;-webkit-text-stroke:2px rgba(255,255,255,.96);paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.65)}
    .overlay-map-icon{width:20px;height:20px;display:block;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 1px rgba(0,0,0,.9))}
    .overlay-map-icon-wrap{width:20px;height:20px;display:grid;place-items:center}
    .overlay-icon-wrap,.overlay-map-icon-wrap{margin:0!important;padding:0!important;line-height:0!important;font-size:0!important}

    .overlay-map-label{display:none !important}
    .show-ov-labels .overlay-map-label{display:none !important}
.overlay-town-label-icon{background:transparent !important;border:0 !important}
    .overlay-town-label{display:inline-block;white-space:nowrap;pointer-events:none;user-select:none;transform:translate(-50%,-100%);color:#121212;font-weight:800;font-size:12px;line-height:1;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 1px 1px rgba(0,0,0,.35)}
    .map-point-icon{
      width:20px;height:20px;border-radius:50%;border:2px solid #00d9ff;box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 2px 8px rgba(0,0,0,.45)
    }
    .map-point-icon.role-pra{background:#8c8c8c}
    .map-point-icon.role-safe{background:#aaaaaa}
    .map-point-icon.selected{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
    .vertex-icon{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #aaaaaa;box-shadow:0 1px 7px rgba(0,0,0,.65)}
    .draft-vertex-icon{width:10px;height:10px;border-radius:50%;background:#d2d2d2;border:2px solid #fff}

    .toast{
      position:absolute;top:12px;left:64px;z-index:1400;max-width:min(560px,calc(100vw - 88px));
      display:flex;flex-direction:column;gap:6px;pointer-events:none
    }
    .toast-item{background:rgba(22,22,22,.95);border:1px solid var(--line);border-left:3px solid #b4b4b4;border-radius:10px;padding:8px 10px;box-shadow:var(--shadow)}
    .toast-item.warn{border-left-color:#b2b2b2}
    .toast-item.err{border-left-color:#cf0000ce}

    .seo-copy{position:absolute;left:-99999px;top:auto;width:1px;height:1px;overflow:hidden}

    *::-webkit-scrollbar{width:10px;height:10px}
    *::-webkit-scrollbar-track{background:#161616;border-radius:8px}
    *::-webkit-scrollbar-thumb{background:#474747;border-radius:8px;border:2px solid #161616}
    *::-webkit-scrollbar-thumb:hover{background:#9e5353}


@media (max-width:900px){
      :root{--tools-w:320px}
      .coordsbar{left:8px;right:8px;bottom:8px}
      .side-panel{top:8px;right:8px;bottom:56px}
      .float-stack{top:8px;left:8px}
      .quick-card{width:min(212px,calc(100vw - 24px))}

      .maps-card{width:min(246px,calc(100vw - 24px))}
      .maps-card .radio-group{flex-wrap:nowrap}
      .placement-flyout{left:58px;bottom:8px;width:min(300px,calc(100vw - 74px));max-height:calc(100vh - 16px)}
      .item-editor{bottom:8px;width:calc(100vw - 16px);max-height:55vh}
      .editor-shape-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    /* Secret Cars overlay (?q=cars) */
    #carsOverlayBtn{
      position:fixed;
      right:16px;
      bottom:16px;
      z-index:5000;
      display:none;
      padding:10px 12px;
      border:1px solid var(--line);
      background:var(--panel2);
      color:var(--txt);
      border-radius:12px;
      cursor:pointer;
      user-select:none;
      font-weight:700;
    }
    #carsOverlayPanel{
      position:fixed;
      right:16px;
      top:16px;
      z-index:5001;
      width:min(420px, calc(100vw - 32px));
      max-height:calc(100vh - 32px);
      overflow:hidden;
      display:none;
      border:1px solid var(--line);
      background:var(--panel);
      border-radius:14px;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }
    #carsOverlayPanel .carsHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      background:var(--panel2);
    }
    #carsOverlayPanel .carsTitle{
      font-weight:800;
      letter-spacing:.2px;
    }
    #carsOverlayClose{
      padding:6px 10px;
      border-radius:10px;
      border:1px solid var(--line);
      background:var(--bg3);
      color:var(--txt);
      cursor:pointer;
    }
    #carsOverlayPanel .carsBody{
      padding:10px 12px;
      overflow:auto;
      max-height:calc(100vh - 32px - 46px);
    }
    #carsOverlayPanel .carsRow{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-bottom:8px;
    }
    #carsOverlayPanel label{
      display:flex;
      gap:6px;
      align-items:center;
      font-size:13px;
      color:var(--txt);
      margin:0;
    }
    #carsOverlayFilter{
      width:100%;
      margin:8px 0 10px;
      padding:10px 10px;
      border-radius:10px;
      border:1px solid var(--line);
      background:var(--bg2);
      color:var(--txt);
      outline:none;
    }
    #carsOverlayList{
      border:1px solid var(--line);
      background:var(--bg2);
      border-radius:12px;
      overflow:hidden;
    }
    .carsItem{
      display:flex;
      gap:10px;
      padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
      cursor:pointer;
      user-select:none;
    }
    .carsItem:last-child{ border-bottom:0; }
    .carsItem:hover{ background:rgba(255,255,255,.04); }
    .carsItem.active{ background:rgba(178,178,178,.12); }
    .carsSwatch{
      width:12px;
      height:12px;
      border-radius:3px;
      margin-top:3px;
      flex:0 0 12px;
    }
    .carsMeta{
      flex:1;
      min-width:0;
    }
    .carsName{
      font-weight:800;
      font-size:13px;
      color:var(--txt);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .carsSub{
      font-size:12px;
      color:var(--muted);
      margin-top:2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #carsOverlayDev{
      margin-top:10px;
      padding-top:10px;
      border-top:1px dashed rgba(255,255,255,.14);
      display:none;
    }
    #carsOverlayExportLabels{
      width:100%;
      margin-top:8px;
      padding:10px 10px;
      border-radius:10px;
      border:1px solid var(--line);
      background:var(--bg3);
      color:var(--txt);
      cursor:pointer;
      font-weight:800;
    }
    #carsOverlayLabelsOut{
      width:100%;
      height:120px;
      margin-top:8px;
      padding:10px 10px;
      border-radius:10px;
      border:1px solid var(--line);
      background:var(--bg2);
      color:var(--txt);
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12px;
      resize:vertical;
    }
    .carsLabelIcon{
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.45);
      color:#fff;
      padding:4px 6px;
      border-radius:10px;
      font-weight:800;
      font-size:12px;
      white-space:nowrap;
      pointer-events:auto;
    }


    /* Placement/editing layout refinements */
    .quick-card{width:204px;padding:7px}
    .maps-card{width:204px}
    .maps-card .radio-group{display:flex;flex-wrap:nowrap!important;gap:4px}
    .maps-card .radio-pill span{padding:6px 7px}
    .placement-flyout{
      left:62px;bottom:10px;top:auto;width:286px;
      max-height:calc(100dvh - 20px);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable
    }
    .toast{
      top:auto!important;bottom:12px;left:12px;
      max-width:min(390px,calc(100vw - 24px))
    }
    .placement-hit-line{pointer-events:stroke}
    @media (max-width:900px){
      .quick-card,.maps-card{width:min(204px,calc(100vw - 20px))}
      .maps-card .radio-group{flex-wrap:nowrap!important}
      .placement-flyout{left:58px;bottom:8px;width:min(286px,calc(100vw - 70px));max-height:calc(100dvh - 16px)}
      .toast{left:8px;bottom:8px;max-width:calc(100vw - 16px)}
    }


    /* Placement/editor corrections */
    .quick-card{width:204px!important;max-width:calc(100vw - 16px)}
    .maps-card{width:204px!important;max-width:calc(100vw - 16px)}
    .maps-card .radio-group{
      display:grid!important;
      grid-template-columns:repeat(3,minmax(0,1fr))!important;
      gap:4px!important;
      width:100%!important;
      overflow:hidden!important
    }
    .maps-card .radio-pill{min-width:0!important;width:100%!important}
    .maps-card .radio-pill span{
      width:100%!important;min-width:0!important;
      padding:6px 2px!important;font-size:12px!important;
      text-align:center!important;overflow:hidden!important
    }

    .placement-flyout{
      position:fixed!important;
      left:62px!important;bottom:10px!important;top:auto!important;
      width:286px!important;max-width:calc(100vw - 74px)!important;
      max-height:calc(100dvh - 20px)!important;
      overflow-y:auto!important;overflow-x:hidden!important
    }
    .placement-storage{display:none!important}

    .shape-picker{
      display:grid!important;
      grid-template-columns:repeat(8,minmax(0,1fr))!important;
      gap:5px!important
    }
    .shape-choice{
      min-width:0!important;width:100%!important;height:36px!important;
      padding:4px!important;display:grid!important;place-items:center!important
    }
    .shape-choice svg{width:22px;height:22px;display:block}
    .shape-choice .shape-text{display:none}
    .editor-shape-picker{grid-template-columns:repeat(8,minmax(0,1fr))!important}

    .item-editor{
      width:min(680px,calc(100vw - 24px))!important;
      max-height:min(58vh,520px)!important
    }
    .item-editor-head{
      display:grid!important;
      grid-template-columns:auto minmax(0,1fr) auto auto!important;
      align-items:center!important;gap:8px!important
    }
    .item-editor-name{
      width:100%!important;background:transparent!important;
      border:0!important;border-bottom:2px solid #e2e2e2!important;
      border-radius:0!important;padding:5px 3px!important;
      font-size:18px!important;color:var(--txt)!important
    }
    .item-editor-close{
      width:30px;height:30px;border:0;background:transparent;
      color:#c7c7c7;font-size:23px;line-height:1;cursor:pointer
    }
    .editor-point-grid{
      display:grid;grid-template-columns:36px 1fr 1fr;gap:5px 7px;
      align-items:center;margin-top:8px
    }
    .editor-point-grid input{min-width:0}
    .editor-point-head{font-size:11px;color:var(--muted);font-weight:700}
    .placement-hit-line{pointer-events:stroke!important}

    .toast{
      top:auto!important;right:auto!important;
      left:12px!important;bottom:12px!important;
      max-width:min(390px,calc(100vw - 24px))!important
    }

    @media (max-width:700px){
      .placement-flyout{left:56px!important;width:min(286px,calc(100vw - 66px))!important}
      .item-editor{bottom:8px!important;width:calc(100vw - 16px)!important}
      .shape-picker,.editor-shape-picker{grid-template-columns:repeat(4,minmax(0,1fr))!important}
      .toast{left:8px!important;bottom:8px!important;max-width:calc(100vw - 16px)!important}
    }


    /* Final placement UI behaviour */
    .maps-card{width:212px!important;max-width:calc(100vw - 18px)!important}
    .maps-card .radio-group{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;width:100%!important}
    .maps-card .radio-pill{width:100%!important;min-width:0!important}
    .maps-card .radio-pill span{width:100%!important;min-width:0!important;padding:7px 4px!important;font-size:12px!important;line-height:1.15!important;justify-content:center!important;overflow:hidden!important}
    .quick-card{width:212px!important;max-width:calc(100vw - 18px)!important}
    .shape-picker{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:5px!important}
    .shape-choice{width:100%!important;min-width:0!important;height:36px!important;padding:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
    .shape-choice svg{width:22px!important;height:22px!important;display:block!important}
    .shape-choice .shape-text{display:none!important}
    #placementFlyout{left:62px!important;top:auto!important;bottom:12px!important;width:300px!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important}
    button.btn,.editor-action,.radio-pill span{display:inline-flex;align-items:center;justify-content:center;line-height:1.15}

    /* Placement editor always has room for labels/coords without becoming a full sidebar. */
    .item-editor{width:min(720px,calc(100vw - 28px))!important;max-height:min(62vh,620px)!important}
    .item-editor-head{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;align-items:center!important;gap:8px!important}
    .item-editor-name{line-height:1.25!important}
    .editor-point-grid input{line-height:1.2!important}

    /* Command tool expands when the generated command/JSON needs more room. */
    .side-panel.command-panel{width:min(390px,calc(100vw - 76px))!important;bottom:auto!important;height:auto!important;max-height:calc(100dvh - 24px)!important}
    .side-panel.command-panel.wide{width:min(570px,calc(100vw - 76px))!important}
    .command-panel .panel-body{max-height:calc(100dvh - 78px)!important;overflow:auto!important}
    .command-panel textarea{min-height:96px!important;max-height:48dvh!important;overflow:auto!important;resize:vertical!important}

    /* Toasts belong in the bottom-right of the usable map area. */
    .toast{top:auto!important;left:auto!important;right:12px!important;bottom:12px!important;max-width:min(420px,calc(100vw - 24px))!important}
    #app.panel-open .toast{right:min(590px,calc(100vw - 12px))!important}
    @media(max-width:760px){
      .shape-picker{grid-template-columns:repeat(4,minmax(0,1fr))!important}
      #placementFlyout{left:56px!important;width:min(300px,calc(100vw - 68px))!important}
      .side-panel.command-panel,.side-panel.command-panel.wide{width:min(92vw,570px)!important}
      #app.panel-open .toast{right:12px!important}
    }


    /* Compact placement editor + drag behaviour */
    .shape-picker{grid-template-columns:repeat(8,minmax(0,1fr))!important}
    .editor-shape-picker{grid-template-columns:repeat(8,minmax(0,1fr))!important}

    .item-editor{
      width:min(460px,calc(100vw - 20px))!important;
      max-height:min(42dvh,360px)!important;
      overflow:auto!important
    }
    .item-editor-body{padding:7px 9px 9px!important}
    .item-editor-head{padding:7px 9px!important}
    .item-editor-name{font-size:16px!important;padding:3px 2px!important}
    .selcard .edit-help{margin-top:7px!important}
    .selcard .row{gap:6px!important}
    .editor-action{padding:6px 9px!important}

    .side-panel.command-panel,
    .side-panel.command-panel.wide{
      width:min(390px,calc(100vw - 76px))!important
    }
    .command-panel textarea{
      max-height:66dvh!important;
      resize:vertical!important
    }

    .leaflet-pane.userShapes-pane .leaflet-interactive{cursor:move}
    .vertex-icon{cursor:grab}
    .leaflet-dragging .vertex-icon{cursor:grabbing}

    @media (max-width:700px){
      .shape-picker,.editor-shape-picker{grid-template-columns:repeat(4,minmax(0,1fr))!important}
      .item-editor{
        width:calc(100vw - 16px)!important;
        max-height:44dvh!important
      }
    }


    /* Compact placement editors */
    .item-editor{
      width:min(330px,calc(100vw - 16px))!important;
      max-height:min(38dvh,290px)!important;
      overflow:auto!important
    }
    .item-editor[data-kind="polygon"]{
      width:min(360px,calc(100vw - 16px))!important;
      max-height:min(42dvh,330px)!important
    }
    .item-editor-head{
      padding:6px 8px!important;
      gap:6px!important
    }
    .item-editor-body{padding:6px 8px 8px!important}
    .item-editor-name{
      font-size:15px!important;
      padding:2px!important
    }
    .editor-action{
      padding:4px 7px!important;
      min-height:27px!important;
      font-size:12px!important
    }
    .item-editor-close{
      width:25px!important;height:25px!important;
      font-size:20px!important
    }
    .selcard .lbl{font-size:10px!important}
    .selcard .tiny,.selcard .edit-help{font-size:10px!important}
    .selcard input{min-height:27px!important;padding:4px 6px!important}
    .selcard .btn{min-height:27px!important;padding:4px 7px!important;font-size:11px!important}
    .selcard .row{gap:5px!important}
    .selcard .grid2{gap:6px!important}
    .editor-shape-picker{gap:4px!important}
    .editor-shape-picker .shape-choice{height:30px!important}
    .editor-shape-picker .shape-choice svg{width:18px!important;height:18px!important}

    @media (max-width:700px){
      .item-editor,.item-editor[data-kind="polygon"]{
        width:calc(100vw - 12px)!important;
        max-height:40dvh!important
      }
    }


    /* Compact anchored placement editor */
    .item-editor{
      position:fixed!important;
      left:0;
      top:0;
      right:auto!important;
      bottom:auto!important;
      transform:none!important;
      width:min(312px,calc(100vw - 16px))!important;
      max-height:min(44dvh,300px)!important;
      overflow:auto!important;
      z-index:1360!important;
      border-radius:12px!important;
    }
    .item-editor[data-kind="polygon"]{width:min(360px,calc(100vw - 16px))!important}
    .item-editor[data-kind="line"]{width:min(330px,calc(100vw - 16px))!important}
    .item-editor-head{
      display:grid!important;
      grid-template-columns:26px minmax(0,1fr) auto auto!important;
      align-items:center!important;
      gap:6px!important;
      padding:7px 9px!important;
    }
    .item-editor-name{
      min-width:0!important;
      width:100%!important;
      font-size:17px!important;
      line-height:1.1!important;
      padding:3px 2px 4px!important;
      border:0!important;
      border-bottom:2px solid #e2e2e2!important;
      border-radius:0!important;
      background:transparent!important;
    }
    .item-editor-close{
      width:26px!important;height:26px!important;min-width:26px!important;
      padding:0!important;font-size:20px!important;display:grid!important;place-items:center!important;
    }
    .item-editor-body{padding:7px 9px 9px!important}
    .editor-action{min-height:26px!important;padding:4px 6px!important;font-size:12px!important}
    .marker-editor-grid{
      display:grid!important;
      grid-template-columns:minmax(120px,1fr) 66px 66px!important;
      gap:7px!important;
      align-items:end!important;
    }
    .marker-editor-actions{min-width:0!important}
    .marker-editor-actions .row{display:flex!important;gap:5px!important;flex-wrap:nowrap!important}
    .marker-editor-actions .btn{white-space:nowrap!important}
    .marker-editor-coord input{
      width:100%!important;min-width:0!important;
      height:29px!important;padding:4px 6px!important;
      font-size:12px!important
    }
    .item-editor .lbl{font-size:10px!important;margin-bottom:3px!important}
    .item-editor .btn{min-height:28px!important;padding:4px 7px!important;font-size:11px!important}
    .item-editor .edit-help{font-size:10px!important;margin-top:6px!important}
    .item-editor .shape-picker{gap:4px!important}
    .item-editor .shape-choice{height:29px!important;padding:3px!important}
    .item-editor .shape-choice svg{width:18px!important;height:18px!important}
    .item-editor .stepper input{height:29px!important;padding:4px 5px!important}
    @media(max-width:560px){
      .item-editor,.item-editor[data-kind="polygon"],.item-editor[data-kind="line"]{
        width:min(312px,calc(100vw - 12px))!important;
      }
      .marker-editor-grid{grid-template-columns:minmax(105px,1fr) 62px 62px!important;gap:5px!important}
    }

    /* Mouse X/Z is always visible at the bottom-left of the map. */
    .coordsbar{
      position:fixed!important;
      left:8px!important;
      right:auto!important;
      top:auto!important;
      bottom:8px!important;
      z-index:1350!important;
      display:flex!important;
      align-items:center!important;
      gap:6px!important;
      padding:0!important;
      background:transparent!important;
      pointer-events:none!important;
    }
    #badgeCoords{
      border:1px solid #ff0000!important;
      background:rgba(8, 8, 8, 0.993)!important;
      color:#eeeeee!important;
      border-radius:7px!important;
      padding:6px 8px!important;
      font:12px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
      box-shadow:0 6px 18px rgba(0,0,0,.32)!important;
    }



    /* Map right-click placement menu */
    .map-context-menu{position:fixed;z-index:2200;width:min(330px,calc(100vw - 20px));padding:8px;border:1px solid #3c3c3c;border-radius:10px;background:rgba(17,17,17,.98);box-shadow:0 12px 36px rgba(0,0,0,.48);color:#eeeeee}
    .map-context-menu[hidden]{display:none!important}
    .map-context-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:2px 3px 7px;border-bottom:1px solid #282828;margin-bottom:7px}
    .map-context-title{font-weight:800;font-size:13px}
    .map-context-coords{font:11px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#acacac;margin-top:2px}
    .map-context-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
    .map-context-grid .btn{width:100%;min-width:0;justify-content:flex-start;text-align:left;padding:7px 8px}
    .map-context-grid .context-wide{grid-column:1/-1}
    .map-context-section{grid-column:1/-1;color:#929292;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:5px 2px 0}

    /* Overlay marker detail popup */
    .leaflet-popup-content .overlay-info-popup{min-width:220px;max-width:280px}
    .overlay-info-title{font-weight:800;font-size:14px;margin-bottom:6px;color:#eeeeee}
    .overlay-info-image-link{display:block;border:1px solid #3c3c3c;border-radius:8px;background:#0e0e0e;overflow:hidden;margin:6px 0;text-decoration:none}
    .overlay-info-image{display:block;width:100%;height:150px;object-fit:contain;background:#0e0e0e}
    .overlay-info-class{font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#bababa;overflow-wrap:anywhere}
    .overlay-info-link{display:inline-block;margin-top:7px;color:#c7c7c7!important;text-decoration:underline;font-weight:700}
    .overlay-info-loading{color:#bababa;font-size:12px;padding:8px 0}


    /* Nasdara + compact map overlays */
    .maps-card .radio-group{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important}
    .maps-card .radio-pill span{font-size:11px!important;padding:6px 4px!important}
    .overlay-map-icon,.overlay-map-icon-wrap{width:14px!important;height:14px!important}
    .overlay-dot{width:14px!important;height:14px!important;font-size:9px!important;border-width:1px!important}
    .overlay-town-label{font-size:10.5px!important;-webkit-text-stroke:1.6px #fff!important}
    .legend-item .overlay-map-icon{width:15px!important;height:15px!important}
    .map-point-icon{width:14px!important;height:14px!important}
    .vertex-icon{width:12px!important;height:12px!important;border-width:2px!important;box-sizing:border-box!important}
    .draft-vertex-icon{width:10px!important;height:10px!important;box-sizing:border-box!important}

    /* Geometry editor below its toolbar button, not detached at the viewport bottom. */
    #placementFlyout{
      position:fixed!important;top:var(--flyout-top,480px)!important;
      left:var(--flyout-left,12px)!important;bottom:auto!important;
      width:min(296px,calc(100vw - 24px))!important;
      max-height:calc(100dvh - 16px)!important;
      overflow:auto!important;z-index:1355!important;
    }
    .shape-dial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
    .dial-control{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
    .dial-control .lbl{align-self:flex-start;width:100%}
    .dial-face{
      width:69px;height:69px;flex:none;border-radius:50%;position:relative;
      border:2px solid #ff0000;background:radial-gradient(circle at 38% 28%,#484848 0%,#262626 45%,#1a1a1a 78%);
      cursor:grab;touch-action:none;user-select:none;
      box-shadow:inset 0 2px 6px #0007,0 2px 7px #0005;
    }
    .dial-face:active{cursor:grabbing}
    .dial-face:focus-visible{outline:2px solid #bbbbbb;outline-offset:3px}
    .dial-face::before{content:"";position:absolute;inset:7px;border:1px dashed #ffffff28;border-radius:50%}
    .dial-pointer{position:absolute;inset:0;transform:rotate(var(--dial-angle,0deg));pointer-events:none}
    .dial-pointer::before{content:"";position:absolute;left:calc(50% - 3px);top:5px;width:6px;height:16px;border-radius:5px;background:#c6c6c6;box-shadow:0 0 5px #bababa99}
    .dial-center{position:absolute;width:11px;height:11px;left:calc(50% - 5.5px);top:calc(50% - 5.5px);border-radius:50%;background:#d0d0d0;border:2px solid #181818;box-shadow:0 1px 5px #0009;pointer-events:none}
    .dial-control input{width:100%;max-width:112px;min-width:0;text-align:center;padding:5px!important;font-size:12px!important}
    .editor-dials .dial-face{width:56px;height:56px}
    .editor-dials .dial-pointer::before{top:4px;height:12px;width:5px;left:calc(50% - 2.5px)}

/* Site map refinements: preserve the existing styles, override only affected elements. */
#placementFlyout{left:var(--flyout-left,12px)!important;top:var(--flyout-top,480px)!important;bottom:auto!important;max-height:var(--flyout-height,calc(100dvh - 20px))!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable}
.leaflet-pane.vertexHandles-pane{z-index:860!important;pointer-events:none}
.leaflet-pane.vertexHandles-pane .leaflet-marker-icon{pointer-events:auto;cursor:grab}
.leaflet-pane.vertexHandles-pane .leaflet-marker-icon.leaflet-drag-target{cursor:grabbing}
.overlay-map-icon-wrap,.overlay-map-icon{width:12px!important;height:12px!important;max-width:12px!important;max-height:12px!important}
.overlay-dot{width:12px!important;height:12px!important;font-size:9px!important;line-height:12px!important}
.vertex-icon{width:12px!important;height:12px!important;border:2px solid #f4f4f4!important;box-sizing:border-box!important}
.overlay-town-label{font-size:10px!important;white-space:nowrap!important}
.overlay-info-loot{border-top:1px solid #ff0000;margin-top:6px;padding-top:7px;font:11px/1.5 system-ui,sans-serif;color:#d7d7d7}
.overlay-info-loot strong{display:block;font-size:12px;margin-bottom:3px;color:#fff}

/* Dark interface and dedicated search header. */
:root{--header-height:80px;--bg:#111111;--bg2:#1a1a1a;--bg3:#1d1d1d;--panel:#171717;--panel2:#202020;--txt:#ebebeb;--muted:#b1b1b1;--line:#ff0000;--accent:#a9a9a9;--accent2:#b1b1b1;color-scheme:dark}
body{display:flex;flex-direction:column}
.search-header{height:var(--header-height);flex:none;display:flex;align-items:center;gap:32px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:1500;box-shadow:0 4px 18px rgba(0, 0, 0, 0.733)}
.header-brand{flex:none}.header-brand h1{margin:0;font-size:20px;letter-spacing:-.5px}.header-brand span{font-size:11px;color:var(--muted)}
.header-search{position:relative;width:min(300px,100%);min-width:0;margin-left:auto;margin-right:auto}
.header-search label{display:block;margin-bottom:4px;font-size:8px;font-weight:700;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}
#mapSearch{height:36px;background:#111111;border-color:var(--line);padding:8px 12px}
#mapSearchResults:not(:empty){position:absolute;top:100%;left:0;right:0;margin-top:8px;padding:12px;max-height:min(300px,50dvh);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
#app{flex:none;min-height:0;height:calc(100dvh - var(--header-height))}
.maps-card{position:relative;width:60px!important;max-width:none!important;padding:0;background:var(--panel)}
.maps-card summary{display:grid;place-items:center;list-style:none;height:44px;border-radius:8px;font-size:12px;color:var(--txt)}
.maps-card summary::-webkit-details-marker{display:none}
.maps-card summary:hover{background:var(--panel2)}
.maps-card .radio-group{position:absolute;top:0;left:100%;margin:0!important;padding:8px;width:220px!important;max-width:calc(100vw - 88px);background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.maps-card:not([open]) .radio-group{display:none!important}
.radio-pill input:focus-visible + span,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.radio-pill input:checked + span{background:#020202;border-color:var(--accent);color:#eaeaea}
@media(max-width:560px){
 :root{--header-height:112px}
 .search-header{padding:10px 12px;gap:8px;flex-wrap:wrap}
 .header-brand{display:flex;align-items:baseline;gap:10px;width:100%}.header-brand h1{font-size:17px}
 .header-search{width:100%}.header-search label{display:none}
}