.business-dot { border: 2px solid #f3c653; }

.holo-business-grid {
  display: flex;
  min-width: max-content;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}

.holo-business-orbit {
  display: flex;
  width: 610px;
  min-height: 610px;
  flex-direction: column;
  align-items: center;
  padding: 35px;
  border: 3px solid #f0c453;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(18, 57, 80, .97), rgba(5, 23, 42, .99) 72%);
  box-shadow: inset 0 0 0 11px rgba(240, 196, 83, .055), 0 22px 60px rgba(0, 0, 0, .32);
}

.holo-business-title {
  display: flex;
  max-width: 72%;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid #876f34;
  border-radius: 999px;
  background: #102c46;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

.holo-business-title > svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: #f2c653;
  color: #07172b;
}

.holo-business-title small,
.holo-business-title b,
.holo-business-title em { display: block; }
.holo-business-title small { color: #f1ca67; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.holo-business-title b { font-size: 15px; }
.holo-business-title em { color: #88a7bd; font-size: 10px; font-style: normal; }

.holo-department-orbits {
  display: flex;
  width: 100%;
  flex: 1;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.holo-department-wrap {
  position: relative;
  width: 185px;
  height: 185px;
}

.holo-department-orbit {
  position: relative;
  display: grid;
  width: 185px;
  height: 185px;
  place-items: center;
  padding: 23px;
  overflow: hidden;
  border: 2px solid #54d7b6;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #123f55, #071e36 72%);
  color: #eef6fb;
  text-align: center;
  box-shadow: inset 0 0 0 7px rgba(84, 215, 182, .06), 0 11px 28px rgba(0, 0, 0, .3);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

.holo-department-wrap .holo-department-orbit { width: 100%; height: 100%; }
.holo-department-delete {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 9px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #7c4353;
  border-radius: 50%;
  background: #321d2b;
  color: #ff9baa;
  box-shadow: 0 6px 15px rgba(0,0,0,.32);
  opacity: .88;
  transition: opacity .16s, transform .16s;
}
.holo-department-delete:hover { opacity: 1; transform: scale(1.08); }
.holo-department-delete svg { width: 16px; height: 16px; }

.holo-department-orbit:hover,
.holo-department-orbit:focus-visible {
  z-index: 2;
  transform: scale(1.06);
  border-color: #f3c653;
  box-shadow: inset 0 0 0 7px rgba(243, 198, 83, .08), 0 0 0 4px rgba(243, 198, 83, .12), 0 15px 34px rgba(0, 0, 0, .36);
  outline: none;
}

.holo-department-name { position: relative; z-index: 1; }
.holo-department-name b,
.holo-department-name small { display: block; }
.holo-department-name b { font-size: 14px; line-height: 1.25; }
.holo-department-name small { margin-top: 7px; color: #8eabc0; font-size: 10px; }
.holo-department-core { position: absolute; right: 17px; bottom: 15px; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #12483f; color: #76e5c5; }
.holo-department-core svg { width: 17px; height: 17px; }
.holo-business-empty { margin: auto; color: #7896ad; font-size: 13px; }

.holo-map-title-row { display: flex; align-items: center; gap: 12px; }
.holo-map-title-row > button { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid #365774; border-radius: 50%; background: #0d2a45; color: #f3ca62; }
.holo-map-title-row > button:hover { border-color: #f3ca62; }
.holo-map-title-row > button svg { width: 19px; height: 19px; }
.holo-map-title-row > div > span { color: #64ddbd; font-size: 11px; font-weight: 800; letter-spacing: .14em; }

@media (max-width: 900px) {
  .holo-business-grid { justify-content: flex-start; }
  .holo-business-orbit { width: 520px; min-height: 520px; padding: 28px; }
  .holo-department-orbit { width: 155px; height: 155px; padding: 19px; }
  .holo-department-wrap { width: 155px; height: 155px; }
}

@media (max-width: 620px) {
  .holo-map-canvas { padding: 18px; }
  .holo-business-orbit { width: 430px; min-height: 430px; padding: 22px; }
  .holo-department-orbit { width: 125px; height: 125px; padding: 13px; }
  .holo-department-wrap { width: 125px; height: 125px; }
  .holo-department-name b { font-size: 12px; }
  .holo-department-name small { font-size: 9px; }
  .holo-business-title { max-width: 82%; }
}