/* ── Layout ── */
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    #map {
      width: 100%;
      height: 100%;
    }

    .leaflet-container {
      background: #1a2332;
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: #0d1520;
    }

    ::-webkit-scrollbar-thumb {
      background: #1e3a5f;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #2563eb;
    }

    /* ── Panels ── */
    .panel {
      display: none;
    }

    .panel.active {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      min-height: 0;
    }

    /* ── Right panel inner scroll ── */
    .panel-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: auto;
      min-height: 0;
    }

    /* ── Tool active ── */
    .tool-active {
      background: #1d3a6e !important;
      box-shadow: inset 0 0 0 2px #3b82f6 !important;
      color: #93c5fd !important;
    }

    /* ── Modal backdrop ── */
    .modal-bg {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(6px);
    }

    /* ── Modal card ── */
    .mc {
      background: #06111e;
      border: 1px solid #1e3a5f;
      border-radius: 14px;
      padding: 22px;
      box-shadow: 0 24px 64px #000;
    }

    .mi label {
      font-size: 11px;
      color: #6b7280;
      display: block;
      margin-bottom: 4px;
    }

    .mi input:not([type=color]):not([type=range]):not([type=file]),
    .mi select {
      background: #0d1e30;
      border: 1px solid #1e3a5f;
      border-radius: 7px;
      outline: none;
      color: #e2e8f0;
      padding: 6px 10px;
      width: 100%;
      font-size: 12px;
      font-family: monospace;
    }

    .mi input[type=color] {
      background: #0d1e30;
      border: 1px solid #1e3a5f;
      border-radius: 7px;
      width: 100%;
      height: 32px;
      cursor: pointer;
    }

    .mbtn {
      border-radius: 7px;
      font-size: 12px;
      padding: 7px 12px;
      cursor: pointer;
      transition: all .15s;
      border: none;
      font-family: monospace;
    }

    .mbtn-c {
      background: #0d1e30;
      color: #9ca3af;
    }

    .mbtn-c:hover {
      color: #fff;
    }

    .mbtn-ok {
      background: #1d4ed8;
      color: #fff;
    }

    .mbtn-ok:hover {
      background: #2563eb;
    }

    .mbtn-del {
      background: #450a0a;
      color: #f87171;
    }

    /* ── Layer rows ── */
    .layer-row {
      border-left: 2px solid transparent;
      transition: background .1s;
    }

    .layer-row:hover {
      background: #0d1e30;
    }

    .layer-row.sel {
      background: #0d2040;
      border-left-color: #3b82f6;
    }

    /* ── Map rows ── */
    .map-row {
      border-left: 3px solid transparent;
      cursor: pointer;
      transition: background .1s;
    }

    .map-row:hover {
      background: #0d1e30;
    }

    .map-row.amap {
      background: #0d2040;
      border-left-color: #3b82f6;
    }

    /* ── Icon / font cards ── */
    .icard {
      transition: all .13s;
      border: 1px solid transparent;
      background: #0d1e30;
      border-radius: 6px;
    }

    .icard:hover {
      background: #0d2040;
      border-color: #3b82f6;
      transform: scale(1.06);
    }

    .icard.sel {
      border-color: #3b82f6;
      background: #0d2040;
    }

    .fcard {
      transition: all .13s;
      border: 1px solid transparent;
      background: #0d1e30;
      border-radius: 6px;
    }

    .fcard:hover {
      background: #0d2040;
      border-color: #3b82f6;
    }

    .fcard.afc {
      border-color: #3b82f6;
      background: #0d2040;
    }

    /* ── DROPDOWN PANELS — fully opaque, always on top ── */
    .drop-panel {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 0;
      z-index: 10000;
      background: #06111e;
      border: 1px solid #1e3a5f;
      border-radius: 10px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 1);
      isolation: isolate;
    }

    /* ── Tile switcher ── */
    #tileSwitcher button.active-tile {
      background: #1d4ed8;
      color: #fff;
    }

    /* ── Import drop zone ── */
    #importDZ {
      border: 2px dashed #1e3a5f;
      border-radius: 10px;
      transition: all .2s;
      cursor: pointer;
    }

    #importDZ:hover,
    #importDZ.drag-over {
      border-color: #3b82f6;
      background: rgba(59, 130, 246, .06);
    }

    /* ── Coord display ── */
    #coordBox {
      font-variant-numeric: tabular-nums;
    }

    /* ── Grad preview ── */
    #rampPreview {
      height: 10px;
      border-radius: 4px;
      background: linear-gradient(to right, #ffffb2, #fecc5c, #fd8d3c, #f03b20, #bd0026);
    }

    /* ── Panel tab active ── */
    .panel-tab.pt-active {
      color: #60a5fa !important;
      border-bottom: 2px solid #3b82f6;
    }