#settings-panel #offline-maps-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-card);
  color: var(--ui-text);
  font: inherit;
  cursor: pointer;
}
.offline-maps-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  color: var(--ui-text);
  background: var(--material-panel,var(--ui-surface));
  -webkit-backdrop-filter: var(--material-blur,none);
  backdrop-filter: var(--material-blur,none);
  box-shadow: var(--ui-shadow);
  font: 14px/1.6 system-ui, sans-serif;
  overflow: auto;
  overscroll-behavior: contain;
}
.offline-maps-dialog::backdrop { background: var(--material-scrim,rgb(0 0 0 / 45%)); }
.offline-maps-dialog header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
  z-index: 1;
}
.offline-maps-dialog h2 { margin: 0; font-size: 20px; }
.offline-maps-dialog h3 { margin: 20px 0 10px; font-size: 15px; }
.offline-maps-content { padding: 0 22px 20px; }
.offline-maps-dialog p { margin: 10px 0; }
.offline-maps-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.offline-maps-fields label { display: grid; gap: 5px; font-weight: 600; }
.offline-maps-dialog select,
.offline-maps-dialog button {
  min-height: 36px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--ui-card);
  color: var(--ui-text);
  font: inherit;
}
.offline-maps-dialog select { width: 100%; min-width: 0; }
.offline-maps-dialog button { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
.offline-maps-dialog button:hover { background: var(--ui-hover); }
}
.offline-maps-dialog button:disabled { opacity: .5; cursor: default; }
.offline-maps-dialog :focus-visible { outline: 2px solid #348afa; outline-offset: 2px; }
.offline-maps-dialog [data-offline-action="download"],
.offline-maps-dialog [data-offline-action="use"] { background: #1672d8; color: #fff; border-color: transparent; }
.offline-maps-dialog [data-offline-action="remove"] { margin-left: auto; color: var(--ui-danger, #ec7474); }
.offline-package { padding: 12px 0; border-top: 1px solid var(--ui-line); }
.offline-package-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.offline-package progress { display: block; width: 100%; height: 6px; margin: 10px 0; accent-color: #348afa; }
.offline-package progress[hidden] { display: none; }
.offline-map-note, .offline-package p { color: var(--ui-text-dim); font-size: 12px; }
.offline-map-credit a { color: inherit; }
.offline-map-complete { width: min(420px, calc(100vw - 32px)); }
.offline-map-complete .offline-package-actions { justify-content: flex-end; }
.offline-map-complete [data-offline-complete="use"] {
  background: var(--ui-accent, #0a84ff);
  color: #fff;
  min-height: 44px;
}
@media (pointer: coarse) {
  .offline-maps-dialog button, .offline-maps-dialog select { min-height: 44px; }
}
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  .offline-maps-dialog {
    top:calc(var(--ui-visual-top,0px) + var(--ui-sheet-top));
    bottom:auto;
    width:var(--ui-sheet-width,calc(100vw - var(--ui-sheet-left) - var(--ui-sheet-right)));
    max-height:calc(var(--ui-visual-height,100dvh) - var(--ui-sheet-top) - var(--ui-sheet-bottom));
    margin:0 auto;
    border-radius:var(--ui-panel-radius);
  }
  .offline-maps-content {padding:0 16px 16px;}
  .offline-maps-header {padding:12px 16px;}
}
@media (max-width: 440px) {
  .offline-maps-fields { grid-template-columns: 1fr; }
  .offline-maps-content { padding-inline: 16px; }
}