.runtime-selector { margin: 0; padding: 0; border: 0; }
.runtime-selector legend { margin-bottom: 6px; color: var(--secondary); font-size: 11px; }
.runtime-selector > div { display: grid; grid-template-columns: 1fr 1fr; min-height: 40px; padding: 3px; border: 1px solid var(--divider); border-radius: 6px; background: var(--canvas); }
.runtime-selector label { position: relative; display: block; }
.runtime-selector input { position: absolute; opacity: 0; pointer-events: none; }
.runtime-selector span { display: grid; height: 32px; place-items: center; border-radius: 4px; color: var(--secondary); font-size: 12px; cursor: pointer; }
.runtime-selector input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-small); }
.runtime-selector input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.runtime-selector input:disabled + span { cursor: default; opacity: .55; }
.toggle-grid { display: grid; gap: 8px; }
.toggle-card { display: flex; min-height: 54px; padding: 10px; gap: 9px; align-items: flex-start; border: 1px solid var(--divider); border-radius: 6px; background: var(--canvas); color: var(--ink); }
.toggle-card input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.toggle-card span { display: grid; gap: 2px; }
.toggle-card strong { font-size: 12px; font-weight: 500; }
.toggle-card small { color: var(--secondary); font-size: 10px; line-height: 1.4; }
.setting-unavailable { opacity: .55; }

.prompt-label { color: var(--secondary); font-size: 11px; }
.settings-note { margin: 0; color: var(--secondary); font-size: 11px; line-height: 1.5; }

.system-screen { width: min(100%, 920px); }
.settings-form { display: grid; gap: 20px; }
.settings-section {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}
.settings-section-heading { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.settings-section-heading h2 { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.settings-section-heading p { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.45; }
.settings-lock { padding: 4px 6px; border: 1px solid var(--warning); border-radius: 4px; color: var(--warning); font-size: 10px; white-space: nowrap; }
.settings-grid { display: grid; gap: 12px; }
.settings-field { display: grid; gap: 6px; color: var(--secondary); font-size: 11px; }
.settings-field select, .settings-field input { width: 100%; min-height: 40px; padding: 8px 9px; }
.settings-toggles { grid-template-columns: 1fr; }
#settingsSystemPrompt { width: 100%; min-height: 300px; padding: 11px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; }
.settings-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.settings-save-status { margin: 0; color: var(--secondary); font-size: 12px; }
.settings-save-status.saved { color: var(--success); }
.settings-save-status.error { color: var(--danger); }

@media (min-width: 640px) {
  .settings-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .settings-toggles { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (min-width: 960px) {
  .settings-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

@media (max-width: 520px) {
  .settings-section { padding: 15px; }
  .settings-section-heading, .settings-actions { align-items: stretch; flex-direction: column; }
  .settings-actions .primary-button { width: 100%; }
}

@media (max-width: 639px) {
  .settings-field select, .settings-field input, #settingsSystemPrompt { min-height: 44px; font-size: 16px; }
  .settings-actions .primary-button { min-height: 44px; }
}