.studio-shell.settings-page-open > :not(.sidebar):not(#runtime-settings-page) {
  display: none !important;
}

#runtime-settings-page {
  grid-column: 2 / -1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  background: #edf0f4;
  color: #18202d;
  font-family: Inter, "Microsoft YaHei", sans-serif;
}

.settings-page-header {
  min-height: 104px;
  box-sizing: border-box;
  padding: 26px 34px 20px;
  border-bottom: 1px solid #d9dee6;
  background: #edf0f4;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.settings-page-header > div {
  min-width: 0;
}

.settings-page-header > div > span {
  display: block;
  color: #7b8492;
  font-size: 11px;
}

.settings-page-header h1 {
  margin: 4px 0 5px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.settings-page-header p {
  margin: 0;
  color: #697386;
  font-size: 12px;
}

.settings-mode-badge {
  margin-left: auto;
  border: 1px solid #d9dee5;
  border-radius: 4px;
  background: #fff;
  color: #626d7b;
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.settings-mode-tabs {
  min-height: 74px;
  padding: 0 34px;
  border-bottom: 1px solid #dfe3e8;
  background: #fff;
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.settings-mode-tabs button {
  min-width: 220px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.settings-mode-tabs button strong,
.settings-mode-tabs button span {
  display: block;
  letter-spacing: 0;
}

.settings-mode-tabs button strong {
  font-size: 15px;
}

.settings-mode-tabs button span {
  margin-top: 5px;
  color: #808996;
  font-size: 11px;
}

.settings-mode-tabs button.active {
  border-bottom-color: #e8503f;
  background: #fff8f6;
  color: #cf3e2e;
}

.settings-page-content {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 24px 34px 56px;
}

.settings-band {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #fff;
  padding: 22px 24px;
}

.settings-console {
  min-height: calc(100vh - 226px);
}

.settings-section-title {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.settings-band h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.settings-band p {
  margin: 6px 0 0;
  color: #717b89;
  font-size: 12px;
  line-height: 1.6;
}

.directory-settings form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.settings-band label {
  display: grid;
  gap: 7px;
  color: #3d4755;
  font-size: 12px;
}

.settings-band input {
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #d4dae2;
  border-radius: 5px;
  background: #fff;
  padding: 0 11px;
  color: #1f2937;
  font: 13px Inter, "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  outline: none;
}

.settings-band input:focus {
  border-color: #e8503f;
  box-shadow: 0 0 0 2px rgba(232, 80, 63, 0.1);
}

.settings-band input:disabled {
  background: #f4f5f7;
  color: #8a929d;
}

.settings-band button {
  height: 38px;
  border: 1px solid #d4dae2;
  border-radius: 5px;
  background: #fff;
  padding: 0 14px;
  color: #354050;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0;
}

.settings-band button:hover:not(:disabled) {
  border-color: #e8503f;
  color: #d84434;
}

.settings-band button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-band button.primary {
  border-color: #e8503f;
  background: #e8503f;
  color: #fff;
}

.settings-band button.primary:hover:not(:disabled) {
  border-color: #d84434;
  background: #d84434;
  color: #fff;
}

.settings-band button.danger {
  border-color: #efc8c3;
  color: #cf3f31;
}

.directory-note {
  padding-left: 1px;
}

.provider-layout {
  min-height: 380px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
}

.provider-content {
  min-width: 0;
  width: 100%;
}

.provider-tabs {
  border-right: 1px solid #e1e5ea;
  padding-right: 14px;
  display: grid;
  align-content: start;
  gap: 5px;
}

.provider-tabs button {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.provider-tabs button.active {
  background: #fff1ee;
  color: #d84434;
  font-weight: 600;
}

.provider-tabs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8ced6;
}

.provider-tabs i.configured {
  background: #29a36a;
}

.provider-settings-form {
  width: 100%;
  max-width: none;
}

.image-model-tabs {
  margin-bottom: 18px;
  border-bottom: 1px solid #e1e5ea;
  display: flex;
  gap: 4px;
}

.image-model-tabs button {
  min-width: 92px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #667180;
}

.image-model-tabs button.active {
  border-bottom-color: #e8503f;
  color: #d84434;
  font-weight: 600;
}

.provider-heading {
  min-height: 38px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4e7eb;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.provider-heading strong,
.provider-heading span {
  display: block;
  letter-spacing: 0;
}

.provider-heading strong {
  font-size: 15px;
}

.provider-heading > div > span {
  margin-top: 4px;
  color: #7c8592;
  font-size: 11px;
}

.provider-settings-form > label {
  margin-bottom: 15px;
}

.settings-status {
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  background: #f4f5f7;
  color: #78818e;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.settings-status.success {
  border-color: #bde4cf;
  background: #eef9f3;
  color: #208656;
}

.settings-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.settings-empty,
.settings-loading,
.settings-load-error {
  min-height: 220px;
  color: #737d8a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-loading,
.settings-load-error {
  height: 100%;
  flex-direction: column;
}

.settings-loading span {
  width: 26px;
  height: 26px;
  border: 3px solid #d9dee5;
  border-top-color: #e8503f;
  border-radius: 50%;
  animation: settings-spin 0.8s linear infinite;
}

.settings-load-error strong {
  color: #b5382c;
  font-size: 16px;
}

.settings-load-error button {
  margin-top: 14px;
}

.settings-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 1200;
  transform: translateX(-50%);
  border: 1px solid #bde4cf;
  border-radius: 5px;
  background: #eef9f3;
  color: #208656;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(26, 35, 48, 0.12);
  font-size: 12px;
}

.settings-toast.error {
  border-color: #efc8c3;
  background: #fff2f0;
  color: #bf382c;
}

@keyframes settings-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .settings-page-header {
    padding: 22px 20px 18px;
  }

  .settings-mode-tabs {
    padding: 0 20px;
  }

  .settings-mode-tabs button {
    min-width: 0;
    flex: 1;
  }

  .settings-page-content {
    width: auto;
    padding: 18px 20px 40px;
  }

  .directory-settings form {
    grid-template-columns: 1fr;
  }

  .provider-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .provider-tabs {
    border-right: 0;
    border-bottom: 1px solid #e1e5ea;
    padding: 0 0 12px;
    grid-template-columns: repeat(var(--settings-menu-count), 1fr);
  }

  .provider-tabs button {
    justify-content: center;
    gap: 6px;
  }
}