/* Ztor Creator Studio - Settings layout, nav, and row molecules */

.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-28);
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: sticky;
  top: 78px;
  align-self: flex-start;
}

.settings-nav__item {
  padding: var(--sp-8) var(--sp-10);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  color: var(--foreground-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.settings-nav__item:hover {
  background: var(--accent);
}

/* 2026-07-27 Q8 裁決 A（推翻 2026-07-13 的中性灰版）：已選一律品牌橘 tint。
   仍然「向 .app-sidebar 看齊」——只是這次是兩邊一起改成橘，同角色同答案。*/
.settings-nav__item--active {
  background: var(--selected-surface);
  color: var(--selected-ink);
  font-weight: var(--fw-medium);
}
.settings-nav__item--active:hover { background: var(--selected-surface-hover); }

.settings-section {
  padding: 0;
}

.settings-section[hidden] {
  display: none;
}

.settings-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-regular);
  letter-spacing: -0.4px;
  margin: 0 0 var(--sp-4);
}

.settings-section__sub {
  color: var(--foreground-muted);
  margin: 0 0 var(--sp-18);
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-14) 0;
  border-bottom: 1px solid var(--border);
}

.settings-row__label {
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
}

.settings-row__hint {
  font-size: var(--fs-12);
  color: var(--muted-foreground);
  margin-top: var(--sp-2);
}

.settings-row__value {
  font-size: var(--fs-13);
  color: var(--foreground-muted);
}