.portal-area-tree {
  display: grid;
  gap: 7px;
  margin: 16px 0;
}

.portal-area-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin-left: calc(var(--portal-depth, 0) * 16px);
  padding: 8px 9px;
  border: 1px solid #385168;
  border-radius: 9px;
  background: #142232;
}

.portal-area-branch { color: #82bdb4; }

.portal-area-edit {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 0;
  padding: 4px;
  background: transparent;
  color: #e0eaf2;
  cursor: pointer;
  overflow-wrap: anywhere;
  font: inherit;
}

.portal-area-edit small { color: #93b9cb; }
.portal-area-edit > span { color: #a6b5c4; font-size: 12px; }
.portal-area-edit:hover strong { color: #94d7c4; }
.portal-area-order { display: flex; gap: 3px; }
.portal-area-order .icon-button { width: 30px; height: 30px; }
.portal-area-order .icon-button:disabled { opacity: .25; cursor: default; }
.portal-area-actions { display: grid; gap: 5px; justify-items: end; }
.portal-area-actions .text-button { font-size: 12px; }
.portal-area-number { color: #8cddc7; font-variant-numeric: tabular-nums; }
.portal-structure-summary { color: #9ad8c9; font-size: 13px; }
.portal-structure-choices,
.portal-structure-numbering {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #385168;
  border-radius: 9px;
}
.portal-structure-choices legend,
.portal-structure-numbering legend { padding: 0 5px; font-weight: 700; }
.portal-structure-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.portal-structure-choice input { margin-top: 4px; }
.portal-structure-choice > span { display: grid; gap: 4px; }
.portal-structure-choice small { color: #a6b5c4; line-height: 1.45; }
.portal-structure-numbering:disabled { opacity: .5; }
.portal-structure-numbering .form-help { margin-bottom: 0; }

@media (max-width: 600px) {
  .portal-area-row { margin-left: calc(var(--portal-depth, 0) * 8px); padding: 6px; }
  .portal-area-order { flex-direction: column; }
}