:root {
  --ios-bg: #f2f2f7;
  --ios-bg-elevated: #ffffff;
  --ios-bg-grouped: #ffffff;
  --ios-separator: rgba(60, 60, 67, 0.12);
  --ios-separator-inset: rgba(60, 60, 67, 0.12);
  --ios-text-primary: #000000;
  --ios-text-secondary: #6d6d72;
  --ios-text-tertiary: #c7c7cc;
  --ios-text-placeholder: #c7c7cc;
  --ios-tint: #007aff;
  --ios-toggle-off: #e9e9ea;
  --ios-toggle-on: #34c759;
  --ios-toggle-knob: #ffffff;
  --ios-toggle-knob-shadow: rgba(0, 0, 0, 0.15);
  --ios-destructive: #ff3b30;
  --ios-cell-active: #e5e5ea;
  --ios-profile-bg: #ffffff;
  --ios-group-radius: 18px;
  --ios-row-height: 44px;
  --ios-font-family: var(--font-family-main);
  --ios-nav-bg: rgba(242, 242, 247, 0.85);
  --ios-nav-separator: rgba(60, 60, 67, 0.10);
}

.dark-mode,
[data-theme="dark"] {
  --ios-bg: #000000;
  --ios-bg-elevated: #1c1c1e;
  --ios-bg-grouped: #1c1c1e;
  --ios-separator: rgba(84, 84, 88, 0.65);
  --ios-separator-inset: rgba(84, 84, 88, 0.65);
  --ios-text-primary: #ffffff;
  --ios-text-secondary: #98989d;
  --ios-text-tertiary: #545458;
  --ios-text-placeholder: #545458;
  --ios-tint: #0a84ff;
  --ios-toggle-off: #39393d;
  --ios-toggle-on: #34c759;
  --ios-toggle-knob: #ffffff;
  --ios-toggle-knob-shadow: rgba(0, 0, 0, 0.35);
  --ios-destructive: #ff453a;
  --ios-cell-active: #2c2c2e;
  --ios-profile-bg: #1c1c1e;
  --ios-nav-bg: rgba(0, 0, 0, 0.85);
  --ios-nav-separator: rgba(84, 84, 88, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode):not([data-theme="light"]) {
    --ios-bg: #000000;
    --ios-bg-elevated: #1c1c1e;
    --ios-bg-grouped: #1c1c1e;
    --ios-separator: rgba(84, 84, 88, 0.65);
    --ios-separator-inset: rgba(84, 84, 88, 0.65);
    --ios-text-primary: #ffffff;
    --ios-text-secondary: #98989d;
    --ios-text-tertiary: #545458;
    --ios-text-placeholder: #545458;
    --ios-tint: #0a84ff;
    --ios-toggle-off: #39393d;
    --ios-toggle-on: #34c759;
    --ios-toggle-knob: #ffffff;
    --ios-toggle-knob-shadow: rgba(0, 0, 0, 0.35);
    --ios-destructive: #ff453a;
    --ios-cell-active: #2c2c2e;
    --ios-profile-bg: #1c1c1e;
    --ios-nav-bg: rgba(0, 0, 0, 0.85);
    --ios-nav-separator: rgba(84, 84, 88, 0.40);
  }
}

.settings-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ios-bg);
  color: var(--ios-text-primary);
  font-family: var(--ios-font-family);
  font-size: var(--app-font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

.settings-scroll {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.settings-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.settings-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 44px;
  background: var(--ios-nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.333px solid var(--ios-nav-separator);
  padding: 8px 16px 10px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.settings-nav__inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.settings-nav__back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: calc(17px * var(--app-font-scale, 1));
  color: var(--ios-tint);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.settings-nav__back:active {
  background: var(--ios-cell-active);
}

.settings-nav__back-chevron {
  font-size: calc(22px * var(--app-font-scale, 1));
  line-height: 0;
  margin-top: -1px;
}

.settings-nav__title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-text-primary);
  letter-spacing: -0.23px;
}

.settings-nav__spacer {
  width: 44px;
  flex-shrink: 0;
}

.settings-profile {
  margin: 0;
  padding: 0;
}

.settings-profile__banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 16px;
  background: var(--ios-profile-bg);
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.settings-profile__banner:active {
  background: var(--ios-cell-active);
  transform: scale(0.985);
}

.settings-profile__icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: linear-gradient(135deg, #5b6abf 0%, #3b4a9f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(59, 74, 159, 0.25);
}

.settings-profile__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-profile__name {
  font-size: calc(18px * var(--app-font-scale, 1));
  font-weight: 600;
  line-height: 1.25;
  color: var(--ios-text-primary);
  margin: 0;
  letter-spacing: -0.24px;
}

.settings-profile__subtitle {
  font-size: calc(13px * var(--app-font-scale, 1));
  line-height: 1.3;
  color: var(--ios-text-secondary);
  margin: 0;
}

.settings-profile__chevron {
  font-size: 22px;
  color: var(--ios-text-tertiary);
  flex-shrink: 0;
  margin-left: 4px;
  font-weight: 300;
}

.settings-group {
  margin: 20px 16px;
}

.settings-group--first {
  margin-top: 8px;
}

.settings-group--last {
  margin-bottom: 36px;
}

.settings-group__title {
  margin: 0 0 6px 2px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: -0.08px;
  line-height: 1.3;
}

.settings-group__footer {
  margin: 6px 2px 0;
  padding: 0;
  font-size: calc(12px * var(--app-font-scale, 1));
  line-height: 1.45;
  color: var(--ios-text-secondary);
}

.settings-list {
  margin: 0;
  padding: 0;
  background: var(--ios-bg-grouped);
  border-radius: var(--ios-group-radius);
  list-style: none;
  overflow: hidden;
}

.settings-list + .settings-list {
  margin-top: 2px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  min-height: var(--ios-row-height);
  cursor: default;
  background: var(--ios-bg-elevated);
  position: relative;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.settings-row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 0.333px;
  background: var(--ios-separator);
}

.settings-row--with-icon::after {
  left: 52px;
}

.settings-row--no-separator::after {
  display: none;
}

.settings-row:last-child::after {
  display: none;
}

.settings-row:first-child {
  border-radius: var(--ios-group-radius) var(--ios-group-radius) 0 0;
}

.settings-row:last-child {
  border-radius: 0 0 var(--ios-group-radius) var(--ios-group-radius);
}

.settings-row:only-child {
  border-radius: var(--ios-group-radius);
}

.settings-row:active {
  background: var(--ios-cell-active);
}

.settings-row[data-settings-page],
.settings-row--nav {
  cursor: pointer;
}

.settings-row__icon {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--app-font-scale, 1));
  flex-shrink: 0;
  color: #ffffff;
  line-height: 1;
}

.settings-row__icon--blue   { background: #007aff; }
.settings-row__icon--green  { background: #34c759; }
.settings-row__icon--orange { background: #ff9500; }
.settings-row__icon--red    { background: #ff3b30; }
.settings-row__icon--purple { background: #af52de; }
.settings-row__icon--pink   { background: #ff2d55; }
.settings-row__icon--teal   { background: #5ac8fa; }
.settings-row__icon--gray   { background: #8e8e93; }
.settings-row__icon--indigo { background: #5856d6; }

.settings-row__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.settings-row__title {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ios-text-primary);
  letter-spacing: -0.23px;
}

.settings-row__desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ios-text-secondary);
}

.settings-row__value {
  font-size: 17px;
  color: var(--ios-text-secondary);
  text-align: right;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  letter-spacing: -0.23px;
}

.settings-row__chevron {
  font-size: 22px;
  color: var(--ios-text-tertiary);
  font-weight: 300;
  flex-shrink: 0;
  line-height: 0;
  padding-bottom: 2px;
}

.settings-row__chevron--nav {
  font-size: 20px;
  color: var(--ios-text-tertiary);
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
  padding-bottom: 1px;
}

.settings-toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 51px;
  height: 31px;
  border-radius: 15.5px;
  background: var(--ios-toggle-off);
  position: relative;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

.settings-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
}

.settings-toggle::after {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--ios-toggle-knob);
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px var(--ios-toggle-knob-shadow),
              0 0 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.settings-toggle:checked {
  background: var(--ios-toggle-on);
}

.settings-toggle:checked::after {
  transform: translateX(20px);
}

.settings-row--toggle {
  cursor: pointer;
}

.settings-row--toggle .settings-row__main {
  cursor: pointer;
}

.settings-row--range {
  cursor: default;
  align-items: stretch;
  padding-top: 12px;
  padding-bottom: 13px;
}

.settings-row--range:active {
  background: var(--ios-bg-elevated);
}

.settings-row--range .settings-row__main {
  gap: 9px;
}

.settings-range-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.settings-range {
  width: 100%;
  height: 6px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, var(--ios-tint), rgba(142, 142, 147, 0.28));
  cursor: pointer;
}

.settings-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  border: 0;
  background: var(--ios-toggle-knob);
  box-shadow: 0 2px 5px var(--ios-toggle-knob-shadow), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.settings-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: var(--ios-toggle-knob);
  box-shadow: 0 2px 5px var(--ios-toggle-knob-shadow), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}

.settings-range__value {
  color: var(--ios-text-secondary);
  font-size: 13px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-row--destructive .settings-row__title {
  color: var(--ios-destructive);
  text-align: center;
  font-weight: 400;
}

.settings-row--destructive {
  justify-content: center;
}

.settings-row--destructive .settings-row__main {
  flex: 0;
  text-align: center;
}

.settings-row--destructive .settings-row__main .settings-row__title {
  font-size: 17px;
}

.settings-empty {
  padding: 80px 16px;
  text-align: center;
  font-size: calc(15px * var(--app-font-scale, 1));
  color: var(--ios-text-secondary);
  line-height: 1.4;
}

.settings-empty__icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.settings-empty__text {
  margin: 0;
}

.settings-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ios-destructive);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  margin-left: 6px;
}

.settings-search-bar {
  margin: 0 16px 8px;
  position: relative;
}

.settings-search-bar__input {
  width: 100%;
  height: 36px;
  border-radius: 18px;
  border: none;
  background: var(--ios-bg-elevated);
  color: var(--ios-text-primary);
  font-family: var(--ios-font-family);
  font-size: 15px;
  padding: 0 12px 0 32px;
  outline: none;
  transition: background 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.settings-search-bar__input::placeholder {
  color: var(--ios-text-placeholder);
}

.settings-search-bar__input:focus {
  background: var(--ios-bg-elevated);
}

.settings-search-bar__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--ios-text-secondary);
  pointer-events: none;
  line-height: 0;
}

.settings-large-title {
  font-size: calc(34px * var(--app-font-scale, 1));
  font-weight: 700;
  line-height: 1.12;
  color: var(--ios-text-primary);
  margin: 8px 16px 16px;
  letter-spacing: 0.11px;
}

.settings-group,
.settings-profile__banner {
  animation: settingsFadeIn 0.35s ease both;
}

@keyframes settingsFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-group:nth-child(2) { animation-delay: 0.00s; }
.settings-group:nth-child(3) { animation-delay: 0.04s; }
.settings-group:nth-child(4) { animation-delay: 0.08s; }
.settings-group:nth-child(5) { animation-delay: 0.12s; }
.settings-group:nth-child(6) { animation-delay: 0.16s; }
.settings-group:nth-child(7) { animation-delay: 0.20s; }

@media (max-width: 374px) {
  .settings-group {
    margin-left: 12px;
    margin-right: 12px;
  }

  .settings-row {
    padding-left: 14px;
    padding-right: 14px;
  }

  .settings-row__title {
    font-size: 16px;
  }

  .settings-large-title {
    font-size: 28px;
    margin-left: 14px;
    margin-right: 14px;
  }

  .settings-profile__banner {
    margin-left: 12px;
    margin-right: 12px;
  }

  .settings-profile__icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 24px;
  }

  .settings-profile__name {
    font-size: 16px;
  }
}

.settings-page .txw-app,
.settings-page .dressup-station,
.settings-page .manager-page,
.settings-page .app-view-panel__body--manager {
  background: var(--ios-bg);
  color: var(--ios-text-primary);
  font-family: var(--ios-font-family);
}

.settings-page .txw-app__scroll,
.settings-page .dressup-station__scroll,
.settings-page .manager-page__scroll {
  padding-bottom: 40px;
}

.settings-page .txw-nav,
.settings-page .dressup-settings-nav,
.settings-page .manager-nav {
  display: none;
}

.settings-page .txw-hero,
.settings-page .dressup-settings-hero,
.settings-page .manager-hero {
  padding: 8px 16px 10px;
}

.settings-page .txw-hero__title,
.settings-page .dressup-settings-hero__title,
.settings-page .manager-hero__title {
  margin: 0;
  color: var(--ios-text-primary);
  font-size: calc(34px * var(--app-font-scale, 1));
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 0.11px;
}

.settings-page .txw-hero__text,
.settings-page .dressup-settings-hero__desc,
.settings-page .manager-hero__desc {
  margin: 8px 0 0;
  color: var(--ios-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.settings-page .txw-group,
.settings-page .dressup-settings-group,
.settings-page .manager-group {
  margin: 20px 16px;
}

.settings-page .txw-group:first-of-type,
.settings-page .dressup-settings-group:first-of-type,
.settings-page .manager-group:first-of-type {
  margin-top: 8px;
}

.settings-page .txw-group__title,
.settings-page .dressup-settings-group__title,
.settings-page .manager-group__title {
  margin: 0 0 6px 2px;
  padding: 0;
  color: var(--ios-text-secondary);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.08px;
  text-transform: uppercase;
}

.settings-page .manager-group__footer {
  margin: 6px 2px 0;
  color: var(--ios-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.settings-page .txw-list,
.settings-page .dressup-settings-list,
.settings-page .manager-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ios-group-radius);
  background: var(--ios-bg-grouped);
  box-shadow: none;
}

.settings-page .txw-row[hidden] {
  display: none;
}

.settings-page .txw-row,
.settings-page .dressup-settings-row,
.settings-page .manager-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ios-row-height);
  padding: 11px 16px;
  border: none;
  border-radius: 0;
  background: var(--ios-bg-elevated);
  color: var(--ios-text-primary);
  text-align: left;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.settings-page .txw-row + .txw-row,
.settings-page .dressup-settings-row + .dressup-settings-row,
.settings-page .manager-row + .manager-row,
.settings-page .txw-api-log-list__scroll + .txw-row--actions {
  box-shadow: none;
}

.settings-page .txw-row::before,
.settings-page .dressup-settings-row::before,
.settings-page .manager-row::before,
.settings-page .txw-api-log-list__scroll + .txw-row--actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 0.333px;
  background: var(--ios-separator);
  pointer-events: none;
}

.settings-page .txw-row:first-child::before,
.settings-page .dressup-settings-row:first-child::before,
.settings-page .manager-row:first-child::before {
  display: none;
}

.settings-page .txw-row:first-child,
.settings-page .dressup-settings-row:first-child,
.settings-page .manager-row:first-child {
  border-radius: var(--ios-group-radius) var(--ios-group-radius) 0 0;
}

.settings-page .txw-row:last-child,
.settings-page .dressup-settings-row:last-child,
.settings-page .manager-row:last-child {
  border-radius: 0 0 var(--ios-group-radius) var(--ios-group-radius);
}

.settings-page .txw-row:only-child,
.settings-page .dressup-settings-row:only-child,
.settings-page .manager-row:only-child {
  border-radius: var(--ios-group-radius);
}

.settings-page button.dressup-settings-row:hover,
.settings-page button.manager-row:hover,
.settings-page .txw-button:hover,
.settings-page .dressup-button:hover {
  filter: none;
  background: var(--ios-bg-elevated);
}

.settings-page button.dressup-settings-row:active,
.settings-page button.manager-row:active {
  background: var(--ios-cell-active);
}

.settings-page .txw-row__title,
.settings-page .dressup-settings-row__title,
.settings-page .manager-row__title,
.settings-page .dressup-icon-editor__preview-name,
.settings-page .dressup-card__title,
.settings-page .dressup-beautify-block__title,
.settings-page .dressup-preview-chat__title {
  color: var(--ios-text-primary);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.23px;
}

.settings-page .txw-row__desc,
.settings-page .txw-field__label,
.settings-page .dressup-field__label,
.settings-page .manager-row__desc {
  color: var(--ios-text-secondary);
}

.settings-page .txw-row__value,
.settings-page .dressup-settings-row__value,
.settings-page .manager-row__value {
  color: var(--ios-text-secondary);
  font-size: 17px;
  letter-spacing: -0.23px;
}

.settings-page .dressup-settings-row__chevron,
.settings-page .manager-row__chevron {
  color: var(--ios-text-tertiary);
  font-size: 22px;
  font-weight: 300;
}

.settings-page .txw-input,
.settings-page .txw-select,
.settings-page .dressup-input,
.settings-page .dressup-select,
.settings-page .dressup-textarea,
.settings-page .dressup-font-preview {
  border: none;
  border-radius: 12px;
  background: var(--ios-bg);
  color: var(--ios-text-primary);
  font-family: var(--ios-font-family);
}

.settings-page .txw-input::placeholder,
.settings-page .dressup-input::placeholder,
.settings-page .dressup-textarea::placeholder {
  color: var(--ios-text-placeholder);
  opacity: 1;
}

.settings-page .txw-input:focus,
.settings-page .txw-select:focus,
.settings-page .dressup-input:focus,
.settings-page .dressup-select:focus,
.settings-page .dressup-textarea:focus {
  background: var(--ios-bg);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}

.settings-page .txw-toggle__slider,
.settings-page .dressup-switch__slider {
  background: var(--ios-toggle-off);
}

.settings-page .txw-toggle__slider::after,
.settings-page .dressup-switch__slider::after {
  background: var(--ios-toggle-knob);
  box-shadow: 0 2px 4px var(--ios-toggle-knob-shadow), 0 0 1px rgba(0, 0, 0, 0.06);
}

.settings-page .txw-toggle__control:checked + .txw-toggle__slider,
.settings-page .dressup-switch input:checked + .dressup-switch__slider {
  background: var(--ios-toggle-on);
}

.settings-page .txw-button,
.settings-page .dressup-button {
  border: none;
  border-radius: 10px;
  background: var(--ios-bg);
  color: var(--ios-tint);
  font-family: var(--ios-font-family);
  font-weight: 400;
}

.settings-page .txw-button:not(.txw-button--secondary):not(.txw-button--danger),
.settings-page .dressup-button--primary {
  background: var(--ios-tint);
  color: #ffffff;
}

.settings-page .txw-button--danger,
.settings-page .manager-row--action[data-manager-action="clear-data"] .manager-row__title,
.settings-page .manager-row--action[data-manager-action="clear-data"] .manager-row__value {
  color: var(--ios-destructive);
}

.settings-page .dressup-card,
.settings-page .dressup-beautify-block,
.settings-page .dressup-preview-chat,
.settings-page .dressup-preview-chat__topbar,
.settings-page .dressup-preview-chat__messages,
.settings-page .dressup-preview-chat__composer {
  background: var(--ios-bg-elevated);
  color: var(--ios-text-primary);
  box-shadow: none;
  border-color: var(--ios-separator);
}

.settings-page .txw-row--image-preview {
  display: block;
  padding: 14px 16px 16px;
}

.settings-page .txw-row--image-preview[hidden] {
  display: none;
}

.image-generation-test-preview {
  display: grid;
  gap: 10px;
  width: 100%;
}

.image-generation-test-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-generation-test-preview__head strong {
  color: var(--ios-text-primary);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.image-generation-test-preview__head a {
  flex-shrink: 0;
  color: var(--ios-tint);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.image-generation-test-preview__frame {
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 0.333px solid var(--ios-separator);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(175, 82, 222, 0.08)),
    var(--ios-bg);
}

.image-generation-test-preview__frame img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.image-generation-test-preview__prompt {
  margin: 0;
  color: var(--ios-text-secondary);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.image-generation-guide {
  margin: 16px 0 0;
  padding: 0;
  background: var(--ios-bg-elevated);
}

.image-generation-guide details {
  display: block;
}

.image-generation-guide summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.image-generation-guide summary::-webkit-details-marker {
  display: none;
}

.image-generation-guide__root {
  border-top: 0.333px solid var(--ios-separator);
}

.image-generation-guide__root-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 38px 14px 16px;
  background: var(--ios-bg-elevated);
}

.image-generation-guide__root-summary::after,
.image-generation-guide__item-summary::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--ios-text-tertiary);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.18s ease;
}

.image-generation-guide__root[open] > .image-generation-guide__root-summary::after,
.image-generation-guide__item[open] > .image-generation-guide__item-summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.image-generation-guide__root-title {
  color: var(--ios-text-primary);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.23px;
}

.image-generation-guide__root-desc {
  color: var(--ios-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.image-generation-guide__catalog {
  padding: 0 12px 14px;
  background: var(--ios-bg-elevated);
}

.image-generation-guide__item {
  overflow: hidden;
  margin-top: 8px;
  border: 0.333px solid var(--ios-separator);
  border-radius: 14px;
  background: var(--ios-bg);
}

.image-generation-guide__item-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 38px 12px 12px;
}

.image-generation-guide__item-summary span {
  color: var(--ios-text-primary);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
}

.image-generation-guide__item-summary small {
  color: var(--ios-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}

.image-generation-guide__item-body {
  border-top: 0.333px solid var(--ios-separator);
  padding: 10px 12px 12px;
}

.image-generation-guide__steps {
  margin: 0;
  padding-left: 19px;
  color: var(--ios-text-primary);
  font-size: 12px;
  line-height: 1.55;
}

.image-generation-guide__steps li + li {
  margin-top: 5px;
}

.image-generation-guide__tip {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.08);
  color: var(--ios-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 420px) {
  .settings-page .txw-group,
  .settings-page .dressup-settings-group,
  .settings-page .manager-group {
    margin-left: 12px;
    margin-right: 12px;
  }

  .settings-page .txw-hero,
  .settings-page .dressup-settings-hero,
  .settings-page .manager-hero {
    padding-left: 14px;
    padding-right: 14px;
  }
}

.settings-subpage {
  position: absolute;
  inset: 0;
  background: var(--ios-bg);
  z-index: 5;
  animation: settingsSlideIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes settingsSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.settings-subpage--back {
  animation: settingsSlideOut 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes settingsSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}