.system-page__shell{
  width:min(1080px, calc(100% - 32px));
  margin-inline:auto;
  padding-block:clamp(32px, 5vw, 72px);
}

.system-page svg{
  width:1.25em;
  height:1.25em;
  max-width:1.25em;
  max-height:1.25em;
}

.cp-system-page-head{
  max-width:1120px;
  margin:0 auto 18px auto;
  padding-inline:16px;
}

.cp-system-page-shell{
  display:block;
  max-width:1120px;
  margin:0 auto;
  padding:0 16px clamp(40px, 6vw, 80px);
}

.cp-system-page-content{
  width:100%;
  max-width:100%;
}

.cp-system-page-content .cp-stack{
  gap:clamp(18px, 3vw, 32px);
}

.cp-system-page-block{
  scroll-margin-top:90px;
}

.cp-system-page svg{
  width:1.25em;
  height:1.25em;
  max-width:1.25em;
  max-height:1.25em;
}

.cp-system-page{
  background: var(--bg);
  color: var(--text);
  padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 7vw, 96px);
}

.cp-system-page__content{
  width: min(1080px, calc(100% - 32px));
  margin-inline: auto;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

.cp-system-page__block{
  width: 100%;
  min-width: 0;
}

.cp-system-page__block > :first-child{
  margin-top: 0 !important;
}

.cp-system-page__block > :last-child{
  margin-bottom: 0 !important;
}

.cp-system-page__adminbar{
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-system-page__empty{
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  background: var(--surface);
}

.cp-system-page img{
  max-width: 100%;
  height: auto;
}

.cp-system-page svg{
  width: 1.25em;
  height: 1.25em;
  max-width: 1.25em;
  max-height: 1.25em;
  flex: 0 0 auto;
}

.cp-system-page .cp-note__icon svg,
.cp-system-page .cp-callout__icon svg,
.cp-system-page .cp-list__icon svg{
  width: 100%;
  height: 100%;
}

.cp-system-page .cp-hero-block{
  margin-bottom: clamp(8px, 2vw, 18px);
}

@media (max-width: 640px){
  .cp-system-page__adminbar{
    align-items: flex-start;
    flex-direction: column;
  }
}

.cp-system-page__block{
  position:relative;
}

.system-page-block-toolbar{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
  padding:8px;
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}