.map-size-shell { min-width: 0; width: 100%; align-self: start; }
.map-size-controls { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 4px 8px; border: 1px solid #dce4ec; border-radius: 0 0 12px 12px; color: #14273d; background: #f7f9fc; font: 12px/1.35 system-ui, sans-serif; }
.map-size-handle { min-height: 44px; min-width: 100px; flex: 1 1 145px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 8px; padding: 4px 6px; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 7px; }
.map-size-grip { width: 20px; height: 6px; flex: 0 0 20px; border-top: 2px solid #53667b; border-bottom: 2px solid #53667b; }
.map-size-title { font-weight: 650; }
.map-size-value { color: #4f637a; font-size: 11px; font-variant-numeric: tabular-nums; }
.map-size-actions { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.map-size-actions button { min-width: 44px; min-height: 44px; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; color: #14273d; background: transparent; font: 650 18px/1.2 system-ui, sans-serif; cursor: pointer; }
.map-size-actions button[data-map-size-action="reset"] { font-size: 11px; max-width: 106px; }
.map-size-actions button:hover:not(:disabled), .map-size-handle:hover { background: #e6edf5; }
.map-size-actions button:disabled { color: #8795a3; cursor: default; }
.map-size-handle:focus-visible, .map-size-actions button:focus-visible { outline: 3px solid #286fe0; outline-offset: 1px; }
.map-size-shell.is-resizing > .map-size-controls { background: #e6edf5; }
.map-size-shell.is-resizing > .map-size-target { pointer-events: none; }
@media (max-width: 460px) {
  .map-size-controls { padding: 2px 5px; gap: 2px 4px; }
  .map-size-handle { flex-basis: 110px; font-size: 11px; gap: 4px 6px; }
  .map-size-value { font-size: 10px; }
}