.settings-page-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.settings-page {
  max-height: min(820px, calc(100vh - 32px));
  overflow: auto;
  background: #f7fafc;
}

.settings-page > header small,
.settings-page-card header small,
.settings-field small,
.settings-page footer small {
  display: block;
  margin-top: 4px;
  color: #66778a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.settings-page-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.settings-page-nav {
  position: sticky;
  top: 0;
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.settings-page-nav a {
  overflow: hidden;
  border-radius: 8px;
  padding: 10px;
  color: #506174;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-page-nav a:hover {
  background: #eff8fc;
  color: #11657d;
}

.settings-page-content,
.settings-page-card,
.settings-page-grid,
.settings-form-grid,
.settings-managed-card dl,
.settings-card-form,
.settings-record-list,
.settings-record {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.settings-page-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-page-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 45, 61, .06);
}

.settings-page-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.settings-page-card > header strong {
  color: var(--ink);
  font-size: 15px;
}

.settings-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-field span,
.settings-managed-card dt,
.settings-quota-list small {
  color: #66778a;
  font-size: 12px;
  font-weight: 900;
}

.settings-field input {
  min-width: 0;
  height: 40px;
  border: 1px solid #d3e0eb;
  border-radius: 8px;
  padding: 0 10px;
  background: #fbfdff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.settings-validation {
  color: #a12d2d;
}

.settings-managed-card dl {
  margin: 0;
}

.settings-managed-card dl div,
.settings-record dl div,
.settings-quota-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f5f8fb;
}

.settings-managed-card dt,
.settings-managed-card dd,
.settings-record dt,
.settings-record dd,
.settings-quota-list strong,
.settings-quota-list span {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-managed-card dd,
.settings-record dd,
.settings-record > strong,
.settings-quota-list strong,
.settings-quota-list span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.settings-record {
  border: 1px solid #e3ebf3;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
}

.settings-card-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-card-form dl,
.settings-card-actions {
  grid-column: 1 / -1;
}

.settings-card-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 860px) {
  .settings-page-layout,
  .settings-page-grid,
  .settings-form-grid,
  .settings-card-form {
    grid-template-columns: 1fr;
  }

  .settings-page-nav {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .settings-page-dialog {
    width: calc(100vw - 12px);
  }

  .settings-page {
    max-height: calc(100vh - 12px);
    padding: 14px;
  }

  .settings-page-nav,
  .settings-page-card > header,
  .settings-managed-card dl div,
  .settings-record dl div,
  .settings-quota-list article {
    grid-template-columns: 1fr;
  }

  .settings-card-actions .primary-button {
    width: 100%;
  }
}