:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: rgb(17, 22, 27);
  color: rgb(245, 248, 252);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 35%, rgba(32, 48, 64, .7), transparent 48%),
    rgb(17, 22, 27);
  color: rgb(245, 248, 252);
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

svg,
img {
  display: block;
}

.app {
  width: min(100%, 1180px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 8px 10px 12px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
}

.topbar {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}

.logo {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  background: rgb(2, 10, 21);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.title {
  min-width: 0;
}

.title h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

.title h1 span {
  color: rgb(238, 35, 50);
}

.title p {
  margin: 3px 0 0;
  color: rgb(146, 154, 164);
  font-size: 13px;
  line-height: 1.2;
}

.live {
  min-height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgb(209, 216, 224);
  font-size: 12px;
  white-space: nowrap;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(238, 35, 50);
  box-shadow: 0 0 0 0 rgba(238, 35, 50, .7);
  animation: pulse 1.8s infinite;
}

.map-screen {
  position: relative;
  height: min(58vh, 520px);
  min-height: 360px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.map-base {
  display: none;
}

.alert-map {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .28));
  touch-action: none;
  user-select: none;
}

.alert-map.dragging {
  cursor: grabbing;
}

#regionLayer,
#labelLayer,
#cityLayer {
  display: inline;
  opacity: 1;
}

.map-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-pill {
  min-height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgb(209, 216, 224);
  font-size: 12px;
}

.active-pill b {
  color: rgb(255, 99, 111);
}

.region-shape {
  fill: rgb(25, 42, 58);
  stroke: rgb(57, 75, 94);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .18s ease, opacity .18s ease, stroke .18s ease;
}

.region-shape:hover,
.region-shape.selected {
  stroke: rgba(230, 238, 247, .86);
  stroke-width: 1.6;
  fill: rgb(35, 54, 72);
}

.region-shape.preview {
  stroke: rgba(180, 210, 255, .7);
  stroke-width: 1.4;
  fill: rgb(28, 48, 65);
}

.region-shape.alert {
  fill: rgb(115, 31, 41);
  stroke: rgba(161, 62, 72, .86);
}

.region-label {
  fill: rgb(119, 149, 206);
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(17, 22, 27, .82);
  stroke-width: 2.4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.region-label.alert {
  fill: rgb(245, 231, 234);
}

.city-point {
  fill: rgb(104, 154, 225);
  stroke: rgba(255, 255, 255, .75);
  stroke-width: 1;
  cursor: pointer;
}

.city-label {
  fill: rgb(119, 149, 206);
  font-size: 7px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(17, 22, 27, .9);
  stroke-width: 1.8px;
}

.city-alert {
  fill: rgb(238, 35, 50);
}

.legend {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: grid;
  gap: 7px;
  color: rgb(182, 188, 197);
  font-size: 13px;
  line-height: 1.2;
  pointer-events: none;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
}

.legend i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
}

.alert-color {
  background: rgb(115, 31, 41);
}

.safe-color {
  background: rgb(25, 42, 58);
}

.control-panel {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(31, 36, 42, .92);
  padding: 6px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .18);
}

.control-panel[hidden] {
  display: none;
}

.selected-card {
  min-height: 50px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
}

.selected-card.alert {
  border-color: rgba(238, 35, 50, .48);
  background: rgba(115, 31, 41, .34);
}

.selected-card h2 {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.18;
  letter-spacing: 0;
}

.selected-card p {
  margin: 0;
  color: rgb(164, 171, 180);
  font-size: 11px;
  line-height: 1.35;
}

.badge {
  min-width: 70px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: rgba(38, 107, 78, .28);
  color: rgb(136, 225, 176);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge.alert {
  background: rgba(238, 35, 50, .16);
  color: rgb(255, 99, 111);
}

.picker-trigger {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgb(245, 248, 252);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, .48);
}

.sheet-backdrop[hidden] {
  display: none;
}

.region-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 21;
  width: min(100%, 720px);
  max-height: min(78vh, 620px);
  transform: translateX(-50%);
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  background: rgba(22, 27, 33, .98);
  padding: 10px;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .42);
}

.region-sheet[hidden] {
  display: none;
}

.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 4px;
}

.sheet-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
}

.sheet-head p {
  margin: 3px 0 0;
  color: rgb(145, 154, 165);
  font-size: 12px;
  line-height: 1.25;
}

.sheet-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: rgb(226, 231, 238);
  display: grid;
  place-items: center;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 8px;
}

.search {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(17, 22, 27, .9);
  color: rgb(245, 248, 252);
  padding: 0 14px;
  outline: none;
}

.search::placeholder {
  color: rgb(120, 128, 138);
}

.filter {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(17, 22, 27, .9);
  color: rgb(226, 231, 238);
  display: grid;
  place-items: center;
}

.filter.active {
  border-color: rgba(238, 35, 50, .72);
  color: rgb(255, 91, 103);
  background: rgba(238, 35, 50, .12);
}

.regions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  max-height: min(42vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 8px;
  padding: 1px 1px 2px;
}

.region {
  min-width: 0;
  min-height: 50px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(17, 22, 27, .86);
  color: rgb(245, 248, 252);
  padding: 7px 8px;
  text-align: left;
  display: grid;
  align-content: space-between;
  gap: 6px;
}

.region.selected {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .09);
}

.region.alert {
  border-color: rgba(238, 35, 50, .48);
  background: rgba(115, 31, 41, .34);
}

.region-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.region-state {
  color: rgb(151, 159, 170);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.region.alert .region-state {
  color: rgb(255, 105, 116);
}

.save {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(135deg, rgb(238, 35, 50), rgb(178, 25, 39));
  color: white;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(238, 35, 50, .22);
}

.save:disabled {
  opacity: .52;
  cursor: default;
  box-shadow: none;
}

.status {
  min-height: 19px;
  margin-top: 8px;
  color: rgb(147, 224, 177);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.empty {
  grid-column: 1 / -1;
  color: rgb(154, 164, 176);
  text-align: center;
  padding: 18px 10px;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px rgba(238, 35, 50, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(238, 35, 50, 0);
  }
}

@media (max-width: 620px) {
  body {
    overflow: hidden;
  }

  .app {
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 6px;
    gap: 6px;
  }

  .topbar {
    min-height: 36px;
    gap: 7px;
  }

  .logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .title h1 {
    font-size: 17px;
  }

  .title p {
    font-size: 11px;
  }

  .map-screen {
    height: auto;
    min-height: 0;
  }

  .alert-map {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .region-label {
    font-size: 7px;
    stroke-width: 1.7px;
  }

  .legend {
    right: 6px;
    bottom: 6px;
    gap: 4px;
    font-size: 9px;
  }

  .legend i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }

  .map-overlay {
    top: 4px;
    right: 4px;
    gap: 5px;
  }

  .live,
  .active-pill {
    min-height: 24px;
    padding: 0 7px;
    font-size: 10px;
  }

  .pulse {
    width: 7px;
    height: 7px;
  }

  .control-panel {
    padding: 5px;
  }

  .selected-card {
    min-height: 46px;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 6px;
  }

  .selected-card h2 {
    font-size: 12px;
  }

  .selected-card p {
    font-size: 10px;
  }

  .badge {
    display: none;
  }

  .picker-trigger {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }

  .region-sheet {
    max-height: 72dvh;
    padding: 9px;
    border-radius: 14px 14px 0 0;
  }

  .sheet-head h2 {
    font-size: 15px;
  }

  .sheet-head p {
    font-size: 11px;
  }

  .toolbar {
    gap: 7px;
    margin-top: 7px;
  }

  .search {
    height: 36px;
    padding: 0 11px;
    font-size: 13px;
  }

  .filter {
    width: 36px;
    height: 36px;
  }

  .regions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: min(42dvh, 360px);
    margin-top: 7px;
  }

  .region {
    min-height: 44px;
    padding: 6px;
  }

  .region-name {
    font-size: 10.5px;
  }

  .region-state {
    font-size: 8px;
  }

  .save {
    min-height: 40px;
    margin-top: 7px;
    font-size: 13px;
  }

  .status {
    min-height: 15px;
    margin-top: 6px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .region-label {
    font-size: 6.4px;
  }

  .region-sheet {
    max-height: 76dvh;
  }

  .region-name {
    font-size: 10px;
  }
}

@media (max-width: 620px) and (max-height: 720px) {
  .topbar {
    min-height: 30px;
  }

  .logo {
    width: 24px;
    height: 24px;
  }

  .title h1 {
    font-size: 15px;
  }

  .title p,
  .legend,
  .city-label,
  .city-point {
    display: none;
  }

  .region-label {
    font-size: 6.2px;
    stroke-width: 1.5px;
  }

  .control-panel {
    padding: 4px;
  }

  .selected-card {
    min-height: 40px;
  }

  .selected-card p {
    display: none;
  }

  .region-sheet {
    max-height: 82dvh;
  }

  .regions {
    max-height: min(52dvh, 380px);
  }
}

@media (min-width: 621px) {
  .region-sheet {
    bottom: 20px;
    border-radius: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .sheet-backdrop {
    background: rgba(0, 0, 0, .38);
  }
}