/* ============================================================
   Settings 設置頁（settings.html）
   ============================================================ */

.set-main { padding-top: 8px; }
.set-block { margin-bottom: 24px; }
.set-card { padding: 4px 16px; }

.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 52px; width: 100%;
  border: none; background: transparent; color: inherit; text-align: left;
  font-size: var(--fs-body); font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
}
.set-card > .set-row:last-child,
.set-card > .set-field:last-child { border-bottom: none; }
.set-row--nav:active { opacity: 0.6; }
.set-muted { color: var(--on-surface-variant); font-weight: 400; }
.set-chev { color: var(--on-surface-variant); opacity: 0.5; font-size: 20px; }

.set-row select, #voice-select {
  border: none; background: transparent; color: var(--on-surface);
  font-size: var(--fs-body); font-weight: 600; text-align: right;
}
.set-row select:focus, #voice-select:focus { outline: none; }

.set-inline-control { display: flex; gap: 8px; align-items: center; }
.set-inline-control #voice-id { flex: 1; }

.set-field {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
}
.set-field > .set-muted { font-size: var(--fs-body); }

.set-key { position: relative; display: flex; }
.set-key input {
  flex: 1; height: var(--btn-lg); padding: 0 44px 0 16px;
  background: color-mix(in srgb, var(--surface-lowest) 60%, transparent);
  border: none; border-radius: var(--radius-lg);
  color: var(--on-surface); font-size: var(--fs-body); font-family: monospace;
}
.set-key input:focus { outline: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.set-key__toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; font-size: 16px; opacity: 0.5;
  width: 32px; height: 32px;
}

#soul-code {
  width: 100%; min-height: 88px; padding: 12px 16px;
  background: color-mix(in srgb, var(--surface-lowest) 60%, transparent);
  border: none; border-radius: var(--radius-lg);
  color: var(--on-surface); font-size: var(--fs-body); font-family: monospace;
  resize: vertical;
}
#soul-code:focus { outline: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }

.set-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 4px 0 12px;
  background: var(--outline-variant); border-radius: 2px; outline: none;
}
.set-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); cursor: pointer;
}
.set-slider::-moz-range-thumb {
  width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--primary);
}

.set-btn-row, .set-btn-row { display: flex; gap: 10px; padding: 12px 0; }
.set-btn-row .btn { flex: 1; }

.set-reset { width: 100%; margin-top: 16px; }

.set-hint {
  font-size: 12px; color: var(--on-surface-variant); opacity: 0.7;
  line-height: 1.5; margin: 4px 0 0;
}
.set-hint a {
  color: var(--primary); text-decoration: underline;
  text-underline-offset: 2px;
}

.set-backup-warn {
  font-size: 12px; color: var(--on-surface-variant);
  text-align: center; padding: 10px 0 6px;
  line-height: 1.5; opacity: 0.8;
}

.set-reset-warn {
  font-size: 12px; color: var(--danger); opacity: 0.8;
  text-align: center; padding: 8px 0 0;
  line-height: 1.5;
}

#voice-id, #persona-text {
  width: 100%; padding: 10px 16px;
  background: color-mix(in srgb, var(--surface-lowest) 60%, transparent);
  border: none; border-radius: var(--radius-lg);
  color: var(--on-surface); font-size: var(--fs-body);
}
#voice-id:focus, #persona-text:focus {
  outline: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
#persona-text {
  min-height: 100px; resize: vertical; font-family: inherit; line-height: 1.6;
}

.set-row select optgroup {
  font-weight: 600; font-style: normal;
  color: var(--on-surface-variant);
}