.hm { max-width: 1440px; margin: 0 auto; color: #1c1917; }
.hm-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #78716c; }
.hm-top h1, .hm-top h2 { margin: 0 0 6px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.hm-home { margin-bottom: 1.5rem; }
.hm-top p { margin: 0 0 14px; max-width: 720px; color: #44403c; }
.hm-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.hm-switch { display: inline-flex; border: 1px solid #d6d3d1; border-radius: 10px; overflow: hidden; background: #fff; }
.hm-switch button { border: 0; background: transparent; padding: 8px 12px; font-weight: 700; cursor: pointer; color: #44403c; }
.hm-switch button.on { background: #1e3a8a; color: #fff; }
.hm-status { display: flex; flex-wrap: wrap; gap: 12px; font-weight: 700; font-size: 14px; }
.hm-status .up, .hm-detail .up, .hm-sec .up, .hm-tape-item .up { color: #15803d; }
.hm-status .down, .hm-detail .down, .hm-sec .down, .hm-tape-item .down { color: #b91c1c; }
.hm-tape { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hm-tape-item { background: #fff; border: 1px solid #e7e5e4; border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.hm-tape-item strong { margin-right: 6px; }
.hm-meta { margin: 0 0 8px; color: #57534e; font-size: 13px; }
.hm-detail { background: #fff; border: 1px solid #e7e5e4; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.hm-detail strong { font-size: 16px; margin-right: 6px; }
.hm-detail span { color: #57534e; margin-right: 8px; }
.hm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.hm-map { position: relative; height: 760px; background: #111827; border-radius: 12px; overflow: hidden; }
.hm-side { display: flex; flex-direction: column; gap: 4px; max-height: 760px; overflow: auto; }
.hm-sec { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 1px solid #e7e5e4; background: #fff; border-radius: 8px; padding: 7px 8px; font-weight: 700; cursor: pointer; }
.hm-sec.on { border-color: #1e3a8a; background: #eff6ff; }
.hm-sec b { font-variant-numeric: tabular-nums; }
.hm-tile { position: absolute; border: 0; padding: 4px 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; cursor: pointer; line-height: 1.15; text-align: left; }
.hm-tile strong { font-size: 13px; font-weight: 800; }
.hm-tile em { font-style: normal; font-size: 12px; font-weight: 700; }
.hm-tile:hover { filter: brightness(1.12); z-index: 2; }
.hm-sec-label { position: absolute; z-index: 3; color: #f8fafc; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hm-empty { color: #e7e5e4; padding: 24px; }
.hm-note { margin: 10px 0 0; color: #78716c; font-size: 12px; max-width: 860px; }
.hm.is-loading .hm-map { opacity: .72; }
@media (max-width: 900px) {
  .hm-layout { grid-template-columns: 1fr; }
  .hm-map { height: 70vh; min-height: 520px; }
  .hm-side { max-height: none; }
  .hm-top h1, .hm-top h2 { font-size: 28px; }
}