:root {
      --label-scale: 0.7;
      --panel-bg: rgba(5, 12, 26, 0.94);
      --panel-border: rgba(92, 180, 255, 0.24);
      --text: #dcecff;
      --muted: #8fb4d8;
      --button: #1f5f9f;
      --button2: #172b47;
      --danger: #7e3038;
      --good: #2b735d;
      --field: #0d1b30;
      --ocean: #020817;
    }
    html, body {
      margin: 0; width: 100%; height: 100%; overflow: hidden;
      font-family: Arial, sans-serif; color: var(--text); background: var(--ocean);
    }
    #map { width: 100vw; height: 100vh; background: var(--ocean); }
    .leaflet-container { background: var(--ocean); }
    .panel {
      position: fixed; top: 12px; right: 12px; width: 390px;
      max-height: calc(100vh - 24px); overflow-y: auto; z-index: 1000;
      background: var(--panel-bg); border: 1px solid var(--panel-border);
      border-radius: 14px; box-shadow: 0 10px 35px rgba(0,0,0,0.4);
      padding: 12px; box-sizing: border-box;
    }
    .panel.left { left: 12px; right: auto; width: 315px; }
    h1,h2 { margin: 0 0 8px; line-height: 1.2; }
    h1 { font-size: 18px; }
    h2 { font-size: 14px; margin-top: 12px; color: #fff; }
    p,.hint { color: var(--muted); font-size: calc(12px * var(--label-scale)); line-height: 1.4; margin: 6px 0 10px; }
    label { display:block; font-size:12px; color:var(--muted); margin:8px 0 4px; }
    input,textarea,select,button {
      font: inherit; border-radius: 8px; border: 1px solid rgba(255,255,255,0.22); box-sizing: border-box;
    }
    input,textarea,select {
      width:100%; padding:8px; color:var(--text); background:var(--field);
    }
    input[type="color"] { height:38px; padding:3px; cursor:pointer; }
    textarea { min-height:84px; resize:vertical; }
    button {
      color:white; background:var(--button); border:0; padding:8px 10px; cursor:pointer; font-weight:bold;
    }
    button:hover { filter: brightness(1.14); }
    button.secondary { background:var(--button2); }
    button.danger { background:var(--danger); }
    button.good { background:var(--good); }
    .row { display:flex; gap:8px; margin:8px 0; }
    .row > * { flex:1; }
    .small { font-size:11px; color:var(--muted); }
    .hidden { display:none !important; }
    .section { border-top:1px solid rgba(255,255,255,0.14); margin-top:12px; padding-top:10px; }
    .pill {
      display:inline-block; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,0.11);
      font-size:11px; color:var(--muted); margin-bottom:4px;
    }
    .list {
      max-height:260px; overflow-y:auto; border:1px solid rgba(255,255,255,0.12);
      border-radius:8px; background:rgba(0,0,0,0.13);
    }
    .list-item {
      padding:8px; border-bottom:1px solid rgba(255,255,255,0.09); cursor:pointer; font-size:12px;
    }
    .list-item:hover { background:rgba(255,255,255,0.08); }
    .list-item:last-child { border-bottom:0; }
    .marker-item {
      display:grid; grid-template-columns: 1fr auto auto auto; gap:5px; align-items:center;
      padding:6px; border-bottom:1px solid rgba(255,255,255,0.1); font-size:12px;
    }
    .marker-item button { padding:5px 7px; font-size:11px; }
    .popup-title { font-weight:bold; font-size:15px; margin-bottom:4px; }
    .popup-body { white-space:pre-wrap; max-width:300px; line-height:1.4; }
    .popup-img { max-width:280px; max-height:180px; object-fit:cover; border-radius:8px; margin:6px 0; }
    .leaflet-popup-content-wrapper { border-radius:10px; }
    .toggleline { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin:6px 0; }
    .toggleline input { width:auto; }
    .tabs { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
    .tabbtn { flex:1; min-width:75px; padding:7px; background:var(--button2); font-size:12px; }
    .tabbtn.active { background:var(--button); }
    .infobox {
      border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:10px;
      background:rgba(0,0,0,0.14); min-height:90px; white-space:pre-wrap; color:#f2f4ff; font-size:13px; line-height:1.45;
    }
    .hero-img { width:100%; max-height:210px; object-fit:cover; border-radius:10px; margin:6px 0 10px; }
    .editor-only.locked { display:none !important; }
    .viewer-note { border:1px solid rgba(255,255,255,0.14); border-radius:8px; padding:8px; background:rgba(0,0,0,0.13); }

    .map-label {
      pointer-events: none;
      color: rgba(205, 232, 255, 0.82);
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-align: center;
      text-shadow:
        0 0 4px rgba(73, 183, 255, 0.85),
        0 0 11px rgba(35, 109, 194, 0.75),
        1px 1px 2px rgba(0,0,0,0.95);
      font-size: 12px;
      line-height: 1.05;
      transform: translate(-50%, -50%) rotate(-7deg);
      opacity: 0.78;
      white-space: normal;
      width: calc(220px * var(--label-scale));
    }

    .map-label.major {
      font-size: calc(20px * var(--label-scale));
      letter-spacing: 0.12em;
      opacity: 0.88;
      width: calc(360px * var(--label-scale));
    }

    .map-label.subdivision {
      font-size: calc(8px * var(--label-scale));
      letter-spacing: 0.08em;
      color: rgba(145, 203, 255, 0.48);
      text-shadow:
        0 0 4px rgba(73, 183, 255, 0.45),
        1px 1px 2px rgba(0,0,0,0.95);
      opacity: 0.6;
      width: calc(160px * var(--label-scale));
    }

    .strategy-frame {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 800;
      background:
        linear-gradient(rgba(80, 175, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 175, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at center, transparent 45%, rgba(0,0,0,0.48) 100%);
      background-size: 8px 8px, 8px 8px, 100% 100%;
      mix-blend-mode: screen;
      opacity: 0.42;
    }

    .strategy-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 58px;
      z-index: 900;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(0,18,45,0.95), rgba(0,13,31,0.55), rgba(0,0,0,0));
      border-bottom: 1px solid rgba(80,180,255,0.22);
      color: rgba(115,210,255,0.92);
      text-align: center;
      text-shadow: 0 0 8px rgba(60,180,255,0.85);
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding-top: 8px;
      box-sizing: border-box;
    }

    .strategy-header small {
      display: block;
      font-size: calc(10px * var(--label-scale));
      letter-spacing: 0.28em;
      color: rgba(110, 170, 220, 0.75);
      margin-top: 2px;
    }


    .draw-help {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 1100;
      background: rgba(5, 12, 26, 0.95);
      border: 1px solid rgba(92, 180, 255, 0.35);
      color: #dcecff;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    .map-label.custom {
      color: rgba(180, 235, 255, 0.82);
      font-size: 10px;
      letter-spacing: 0.12em;
      width: calc(190px * var(--label-scale));
    }

    @media (max-width: 850px) {
      .panel,.panel.left { width:calc(100vw - 24px); max-height:42vh; }
      .panel.left { top:auto; bottom:12px; }
    }

/* Label size slider fix */
html,
body,
#map {
  --label-scale: 0.7;
}

.leaflet-container .map-label {
  font-size: calc(12px * var(--label-scale)) !important;
  width: calc(220px * var(--label-scale)) !important;
}

.leaflet-container .map-label.major {
  font-size: calc(20px * var(--label-scale)) !important;
  width: calc(360px * var(--label-scale)) !important;
}

.leaflet-container .map-label.custom {
  font-size: calc(10px * var(--label-scale)) !important;
  width: calc(190px * var(--label-scale)) !important;
}

.leaflet-container .map-label.subdivision {
  font-size: calc(8px * var(--label-scale)) !important;
  width: calc(160px * var(--label-scale)) !important;
}


/* Hard label slider fallback - inline styles from JS override these */
.map-label {
  transition: font-size 0.08s linear, width 0.08s linear;
}


/* Label creation-size fix */
.map-label {
  box-sizing: border-box !important;
  max-width: none !important;
}


/* Final label slider controller helpers */
#labelSizeInput {
  cursor: pointer;
}
.map-label {
  max-width: none !important;
}