.random-area {
  margin: 1rem 0 0.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid #ccd8df;
  border-radius: 7px;
  min-width: 0;
}
.random-area legend { padding: 0 0.4rem; font-weight: 600; font-size: 0.95rem; }
.random-area-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0.8rem; align-items: start; margin: 0.4rem 0; }
.random-area-row > label, .random-area-row > span { padding-top: 0.4rem; font-size: 0.875rem; color: #536572; font-weight: 600; }
.random-area-distance, .random-area-dialog-distance { display: flex; align-items: center; gap: 0.5rem; }
.random-area-distance input, .random-area-dialog-distance input { width: 7rem; }
.random-area-center { padding-top: 0.3rem; }
.random-area-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.4rem; }
.random-area-link { border: 0; background: none; color: #126b9e; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; font-size: 0.875rem; }
.random-area-link:disabled { color: #687783; cursor: default; text-decoration: none; }
.random-area-status { color: #536572; font-size: 0.82rem; line-height: 1.4; margin: 0.75rem 0 0; }
.random-area .is-inactive, .random-area.is-inactive { opacity: 0.6; }
.random-area-thumbnail { position: relative; width: 240px; max-width: 100%; margin-top: 0.35rem; border: 1px solid #b2c5d0; border-radius: 5px; overflow: hidden; }
.random-area-preview { height: 115px; }
.random-area-preview-button { position: absolute; inset: 0 0 18px; z-index: 500; border: 0; background: transparent; cursor: pointer; }
.random-area-preview-button:focus-visible { outline: 3px solid #247db2; outline-offset: -3px; }
.random-area-preview-button:disabled { cursor: default; }
.random-area-dialog { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 1.25rem; box-sizing: border-box; border: 1px solid #b2c5d0; border-radius: 10px; color: #2c3e48; }
.random-area-dialog::backdrop { background: rgb(24 42 54 / 50%); }
.random-area-dialog h2 { margin: 0 0 0.5rem; }
.random-area-dialog p { font-size: 0.9rem; line-height: 1.4; }
.random-area-dialog-distance { margin: 0.8rem 0; }
.random-area-map { height: min(48dvh, 440px); min-height: 180px; border: 1px solid #b2c5d0; border-radius: 5px; }
.random-area-dialog-actions { display: flex; justify-content: flex-end; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.random-area-dialog-actions > :first-child { margin-right: auto; }
.random-area-marker { border: 2px solid #126b9e; border-radius: 50%; background: white; color: #126b9e; text-align: center; line-height: 28px; font-size: 25px; box-shadow: 0 1px 5px #687783; }
@media (max-width: 540px) {
  .random-area-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .random-area-dialog { padding: 0.8rem; }
  .random-area-dialog-distance { flex-wrap: wrap; }
}
.random-area-distance input, .random-area-dialog-distance input {
  height: 2.35rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #aebbc4;
  border-radius: 5px;
  font: inherit;
  color: #33434e;
  background: white;
}
.random-area-distance input:focus, .random-area-dialog-distance input:focus {
  outline: 3px solid rgb(52 152 219 / 20%);
  border-color: #3498db;
}