.offline-dialog {
  position: fixed;
  z-index: 2100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #18221db8;
  backdrop-filter: blur(8px);
}

.offline-dialog[hidden] { display: none; }

.offline-card {
  width: min(520px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow-y: auto;
  border-radius: 22px;
  background: #f7f8f7;
  box-shadow: 0 26px 75px #0b161044;
}

.offline-card header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e8ebe8;
  background: #fff;
}

.offline-card h2 { margin: 0; color: #2d3035; font-size: 22px; }
.offline-card header span { display: block; margin-top: 4px; color: #7b827d; font-size: 11px; }
.offline-card header button { width: 38px; height: 38px; border-radius: 50%; background: #f0f2f0; color: #555d58; font-size: 22px; }

.offline-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 14px;
  overflow: hidden;
  border: 1px solid #e1e6e2;
  border-radius: 15px;
  background: #fff;
}

.offline-summary div { padding: 14px 8px; border-right: 1px solid #edf0ed; text-align: center; }
.offline-summary div:last-child { border: 0; }
.offline-summary b,.offline-summary span { display: block; }
.offline-summary b { color: #2d3035; font-size: 15px; }
.offline-summary span { margin-top: 3px; color: #878e89; font-size: 9px; }

.offline-region-catalog { margin: 0 14px 14px; padding: 13px; border: 1px solid #e1e6e2; border-radius: 16px; background: #fff; }
.offline-catalog-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #32363a; font-size: 12px; }
.offline-catalog-title span { color: #8a918c; font-size: 9px; font-weight: 750; }
.offline-region-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; padding: 5px 7px 5px 11px; border: 1px solid #dfe4e0; border-radius: 12px; background: #f7f9f7; }
.offline-region-picker > span { color: #737b76; font-size: 10px; font-weight: 750; white-space: nowrap; }
.offline-region-picker select { min-width: 0; height: 36px; border: 0; outline: 0; background: #fff; color: #30353a; font: 750 11px inherit; cursor: pointer; }
.offline-region-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.offline-region-search input { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #dfe4e0; border-radius: 11px; outline: 0; color: #30353a; font: 12px inherit; }
.offline-region-search input:focus { border-color: #e6bb39; box-shadow: 0 0 0 3px #ffd45a35; }
.offline-region-search button { padding: 0 17px; border-radius: 11px; background: #30343a; color: #fff; font-size: 11px; font-weight: 800; }
.offline-search-results { display: grid; gap: 7px; margin-top: 10px; }
.offline-search-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border-radius: 12px; background: #f5f7f5; }
.offline-search-row > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff0b7; color: #5b4b17; font-size: 17px; }
.offline-search-row b,.offline-search-row small,.offline-search-row em { display: block; }
.offline-search-row b { overflow: hidden; color: #30353a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.offline-search-row small { overflow: hidden; margin-top: 2px; color: #858c87; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.offline-search-row em { margin-top: 3px; color: #327a55; font-size: 9px; font-style: normal; font-weight: 750; }
.offline-search-row button { min-width: 72px; height: 34px; border-radius: 10px; background: #ffd45a; color: #30343a; font-size: 10px; font-weight: 850; }
.offline-search-actions { display: grid; grid-template-columns: 1fr; gap: 5px; }
.offline-search-row .map-download { background: #30343a; color: #fff; }
.offline-search-row button:disabled { background: #e8ebe8; color: #969c98; cursor: default; }
.offline-region-empty.error { color: #b84d4d; }

.offline-download-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 0 14px 14px; }
.offline-download-actions button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 13px; border: 1px solid #dfe4e0; border-radius: 14px; background: #fff; color: #343a36; text-align: left; }
.offline-download-actions button:hover { border-color: #bbc9bf; box-shadow: 0 6px 18px #24342a12; }
.offline-download-actions button:disabled { opacity: .45; }
.offline-download-actions span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #ffd45a; color: #2d3035; font-size: 17px; }
.offline-download-actions b { font-size: 12px; }

.offline-progress { margin: 0 14px 14px; padding: 13px; border-radius: 14px; background: #30343a; color: #fff; }
.offline-progress[hidden] { display: none; }
.offline-progress > div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.offline-progress progress { width: 100%; height: 8px; margin: 10px 0 4px; accent-color: #ffd45a; }
.offline-progress small { display: block; overflow: hidden; color: #c8ceca; text-overflow: ellipsis; white-space: nowrap; }
.offline-progress-footer { display: flex; align-items: center; gap: 10px; }
.offline-progress-footer small { min-width: 0; flex: 1; }
.offline-progress-footer button { flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; background: #ffffff18; color: #fff; font-size: 10px; font-weight: 800; }
.offline-progress-footer button:hover { background: #ffffff2b; }
.offline-progress-footer button[hidden] { display: none; }

.offline-list-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px 8px; border-top: 1px solid #e4e8e5; }
.offline-list-head b { color: #32363a; font-size: 12px; }
.offline-list-head button { width: 31px; height: 31px; border-radius: 9px; background: #ecefec; color: #56605a; }
.offline-region-list { display: grid; gap: 8px; padding: 0 14px 16px; }
.offline-region-row { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid #e1e5e2; border-radius: 13px; background: #fff; }
.offline-region-row > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #e6f3ea; color: #23764d; font-size: 17px; }
.offline-region-row b,.offline-region-row small { display: block; }
.offline-region-row b { overflow: hidden; color: #33383b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.offline-region-row small { margin-top: 3px; color: #848b87; font-size: 9px; }
.offline-region-row strong { color: #277a51; font-size: 10px; }
.offline-region-row .offline-delete { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: #f3f4f3; color: #7b837e; font-size: 17px; cursor: pointer; transition: background .16s, color .16s, transform .16s; }
.offline-region-row .offline-delete:hover { background: #ffe8e6; color: #d34c43; transform: translateY(-1px); }
.offline-region-row .offline-delete:disabled { cursor: wait; opacity: .55; transform: none; }
.offline-region-empty { padding: 28px 12px; border: 1px dashed #d8ded9; border-radius: 13px; color: #888f8a; text-align: center; font-size: 11px; }
.offline-grid-tile { box-sizing: border-box; width: 256px; height: 256px; border-right: 1px solid #dfe5df; border-bottom: 1px solid #dfe5df; background: #f3f6f3; color: #a2aaa4; }
.offline-grid-tile span { display: block; padding: 9px; font: 10px/1 system-ui, sans-serif; }

@media (max-width: 720px) {
  .offline-dialog { padding: 7px; align-items: end; }
  .offline-card { max-height: calc(100vh - 14px); border-radius: 20px 20px 14px 14px; }
  .offline-card header { padding: 16px; }
  .offline-download-actions { grid-template-columns: 1fr; }
  .offline-summary b { font-size: 13px; }
  .offline-search-row { grid-template-columns: 30px minmax(0, 1fr); }
  .offline-search-actions { grid-column: 2; grid-template-columns: repeat(2, 1fr); }
}