.management-portal-shell {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f8fc;
  color: #101828;
}

.management-portal-header {
  min-height: 64px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e4e9f2;
  background: #fff;
  box-sizing: border-box;
}

.management-portal-brand,
.management-portal-actions,
.management-role-switch,
.management-user {
  display: flex;
  align-items: center;
}

.management-portal-brand { gap: 10px; }
.management-portal-brand img { width: 36px; height: 36px; border-radius: 9px; }
.management-portal-brand div { display: flex; flex-direction: column; gap: 2px; }
.management-portal-brand strong { font-size: 15px; }
.management-portal-brand span { color: #667085; font-size: 12px; }
.management-portal-actions { gap: 16px; }
.management-role-switch { padding: 3px; gap: 3px; background: #f2f4f7; border-radius: 10px; }
.management-role-switch button,
.management-user button,
.management-frame-status button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.management-role-switch button { padding: 7px 12px; background: transparent; color: #475467; font-size: 13px; }
.management-role-switch button.active { background: #1f3cff; color: #fff; box-shadow: 0 2px 8px rgba(31,60,255,.22); }
.management-user { gap: 10px; color: #344054; font-size: 13px; }
.management-user button { padding: 7px 10px; background: #fff; color: #d92d20; border: 1px solid #fecdca; }
.management-frame-wrap { flex: 1; min-height: 0; position: relative; }
#ocean-management-frame { width: 100%; height: 100%; display: block; border: 0; background: #f6f8fc; opacity: 0; transition: opacity .15s ease; }
#ocean-management-frame.ready { opacity: 1; }
.management-frame-status { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #667085; background: #f6f8fc; }
.management-frame-status strong { color: #101828; }
.management-frame-status button { padding: 9px 14px; background: #1f3cff; color: #fff; }
.management-frame-status[hidden] { display: none; }

@media (max-width: 760px) {
  .management-portal-header { align-items: flex-start; padding: 10px 12px; }
  .management-portal-brand span, .management-user span { display: none; }
  .management-portal-actions { gap: 8px; }
  .management-role-switch { max-width: 58vw; overflow-x: auto; }
  .management-role-switch button { white-space: nowrap; padding-inline: 9px; }
}