/* === SettingsModal: all settings-related layout, panel, and component styles ===
   Extracted from styles.css as part of the Sweep-3 CSS extraction effort.
   Imported by SettingsModal.tsx (and MemoryView.tsx for shared classes). */

/* === Settings Modal header action buttons (Star on GitHub, Help) === */
.settings-header-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  margin-left: auto;
  margin-right: var(--space-sm);
}

/* Keep the GitHub Star and Help buttons at matching heights regardless of
   their differing icon sizes (provider icon 16px vs. HelpCircle 13px). */
.settings-header-actions > .settings-github-star-btn,
.settings-header-actions > .btn {
  height: 26px;
  box-sizing: border-box;
}

/* GitHub star button — split-pill layout: [Star half | Count half] */
.settings-github-star-btn {
  display: inline-flex;
  align-items: stretch;
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.settings-github-star-btn:hover {
  border-color: var(--text-muted);
  background: var(--card-hover);
}

.settings-github-star-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-strong);
  border-color: var(--todo);
}

.settings-github-star-btn__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
}

.settings-github-star-btn__count {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-left: var(--btn-border-width) solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, var(--card));
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* === Settings Modal: sizing + resizability === */
.settings-modal {
  width: min(95vw, 1100px);
  max-width: 95vw;
  min-width: 520px;
  height: 80vh;
  min-height: 480px;
  max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px);
  overflow: hidden;
  resize: both;
}

/* Mobile: full-screen sheet. The desktop `min-width: 520px` was forcing the
   modal wider than narrow viewports, pushing it off-screen; the desktop
   `height: 80vh` left awkward strips of overlay above and below. Drop the
   overlay's default top padding so the modal actually fills the viewport,
   and disable resize (touchscreen users can't drag the grip anyway). */
@media (max-width: 768px) {
  .modal-overlay:has(.settings-modal) {
    padding-top: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .modal.settings-modal {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
    resize: none;
  }
}

/* === Settings Layout === */
.settings-modal-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-modal-heading h3 {
  margin: 0;
}

.settings-modal-version {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.settings-update-check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.settings-update-btn {
  border-radius: var(--radius-sm);
}

.settings-update-btn svg.spinning {
  animation: settings-update-spin 1s linear infinite;
}

.settings-update-result {
  font-size: 0.85rem;
  font-weight: 500;
}

.settings-update-result--up-to-date {
  color: var(--color-success);
}

.settings-update-result--available {
  color: var(--color-info);
}

.settings-update-result--error {
  color: var(--text-muted);
}

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

.settings-layout {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

.settings-mobile-section-picker {
  display: none;
}

.settings-sidebar {
  width: 170px;
  min-width: 170px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px 8px;
  gap: 2px;
  background: rgba(0, 0, 0, 0.1);
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

.settings-sidebar::-webkit-scrollbar {
  width: 6px;
}

.settings-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.settings-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

.settings-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.settings-nav-item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  text-align: left;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.settings-nav-item:hover {
  background: var(--bg);
  color: var(--text);
  border-left-color: var(--border);
}
.settings-nav-item:focus-visible {
  box-shadow: var(--focus-ring-strong);
  outline: none;
}
.settings-nav-item.active {
  background: var(--bg);
  color: var(--todo);
  font-weight: 600;
  border-left-color: var(--todo);
}

/* Settings group headers - visual separators between global and project sections */
.settings-group-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-md) var(--space-xs);
  margin-top: var(--space-sm);
  user-select: none;
}
.settings-group-header:first-child {
  margin-top: 0;
}

.settings-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 0 12px;
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

.settings-content::-webkit-scrollbar {
  width: 6px;
}

.settings-content::-webkit-scrollbar-track {
  background: transparent;
}

.settings-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

.settings-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.settings-content > * {
  animation: settingsFadeIn var(--transition-normal);
}
@keyframes settingsFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-section-heading {
  font-size: 14px;
  font-weight: 600;
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  margin: 0 var(--space-xl) 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xs);
}

/* Spacing modifier for settings-section-heading that need extra top margin */
.settings-section-heading--spaced {
  margin-top: var(--space-xl);
}

.settings-plugins-subsection-toggle {
  display: inline-flex;
  gap: var(--space-xs);
  padding: 0 var(--space-xl);
  margin: var(--space-md) 0;
}

.settings-plugins-subsection-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.settings-plugins-subsection-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.settings-plugins-subsection-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-strong);
}

.settings-plugins-subsection-btn.active {
  background: color-mix(in srgb, var(--todo) 14%, transparent);
  border-color: color-mix(in srgb, var(--todo) 45%, var(--border));
  color: var(--todo);
}

.settings-plugins-subsection-panel {
  padding-bottom: var(--space-md);
}

/* Scope indicators in sidebar nav items */
.settings-scope-icon {
  margin-right: 6px;
  display: inline-flex;
  vertical-align: middle;
  color: var(--text-muted);
}

/* Scope banner above section content */
.settings-scope-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  margin: 0 var(--space-xl) var(--space-xs);
  font-size: 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
}
.settings-scope-global {
  background: color-mix(in srgb, var(--color-info) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-info) 40%, transparent);
}
.settings-scope-project {
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-success) 40%, transparent);
}
.settings-scope-mixed {
  background: color-mix(in srgb, var(--triage) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--triage) 40%, transparent);
}

/* Helper note styling for Settings sections — aligns with form-group horizontal gutters */
.settings-note {
  display: block;
  padding: 0 var(--space-xl);
  margin-top: var(--space-xs);
  font-size: 12px;
  color: var(--text-muted);
}

.settings-overlap-ignore-group code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.settings-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.settings-raw-output {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  max-height: calc(var(--space-2xl) * 7);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: calc(var(--space-sm) + var(--space-xs));
}

.settings-url-output {
  display: block;
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: calc(var(--space-sm) + var(--space-xs));
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: auto;
  max-width: 100%;
}

.settings-qr-preview {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-qr-preview-label {
  margin: 0;
  font-size: calc(var(--space-sm) + var(--space-xs));
  color: var(--text-muted);
}

.settings-qr-preview-image-wrap {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.settings-qr-preview-image {
  display: block;
  width: min(calc(var(--space-2xl) * 6), 100%);
  height: auto;
  aspect-ratio: 1 / 1;
}

.settings-overlap-ignore-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}

.settings-overlap-ignore-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
}

.settings-overlap-ignore-path-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
}

.settings-overlap-path-picker-modal {
  max-width: min(960px, calc(100vw - var(--space-2xl)));
}

.settings-overlap-path-picker-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: min(70vh, 720px);
}

.settings-overlap-path-picker-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.settings-section-divider {
  border-top: 1px solid var(--border);
  margin: var(--space-lg) var(--space-xl);
}

@media (max-width: 768px) {
  .settings-note {
    padding: 0 var(--space-lg);
  }

  .settings-overlap-ignore-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-overlap-ignore-path-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-overlap-ignore-row > .btn {
    justify-self: start;
  }

  .settings-overlap-path-picker-modal {
    max-width: calc(100vw - var(--space-md));
  }
}

/* === Notifications Settings === */
.ntfy-advanced-disclosure {
  margin-top: var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.ntfy-advanced-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.ntfy-advanced-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ntfy-advanced-content {
  padding: 0 var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-inline-link {
  color: var(--todo);
  text-decoration: none;
  transition: text-decoration var(--transition-fast);
}

.settings-inline-link:hover {
  text-decoration: underline;
}

.settings-inline-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-strong);
  border-radius: var(--radius-sm);
}

/* === Memory Settings === */
.memory-status-message {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.memory-status-message span {
  min-width: 0;
}

.memory-retrieval-test {
  margin-top: var(--space-lg);
}

.memory-test-result {
  margin: 0 var(--space-xl) var(--space-lg);
  padding: var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.memory-test-result strong,
.memory-test-result span {
  color: var(--text);
  font-size: 12px;
}

.memory-test-result small {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: 12px;
}

.memory-test-result ul {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.memory-test-result li {
  padding-top: var(--space-sm);
  border-top: var(--btn-border-width) solid var(--border);
}

.memory-test-result li + li {
  margin-top: var(--space-sm);
}

.memory-test-result p {
  margin: var(--space-xs) 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.memory-editor-section {
  margin-top: var(--space-lg);
}

.memory-file-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  margin: 0 var(--space-xl) var(--space-md);
  padding: var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.memory-file-summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  font-size: 11px;
  font-weight: 600;
}

.memory-file-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.memory-file-summary small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 12px;
}

.memory-editor-frame {
  min-height: 50vh;
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* === Auth Provider Cards === */

/* Horizontal gutter wrapper for the auth section body. Tighter than the
   default form-group gutter so each provider card gets more horizontal room
   — the cards are dense enough that the wider --space-xl gutter wasted
   visible width without any visual benefit. */
.auth-panel-body {
  padding-inline: var(--space-md);
}

.auth-section-hint {
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-muted);
  border-left: 3px solid var(--text-muted);
}
.auth-provider-group {
  margin-bottom: 10px;
}
.auth-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding: 0 4px;
}
.auth-provider-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-provider-card:hover {
  border-color: var(--text-dim);
}
.auth-provider-card--authenticated {
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--border));
  background: color-mix(in srgb, var(--color-success) 5%, var(--surface));
}
.auth-provider-card--authenticated:hover {
  border-color: color-mix(in srgb, var(--color-success) 60%, var(--border));
}
.auth-provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 12px;
}
.auth-provider-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.auth-provider-info strong {
  font-weight: 500;
  color: var(--text);
}
.auth-provider-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--space-md) + var(--space-xs) * 2);
  block-size: calc(var(--space-md) + var(--space-xs) * 2);
  flex-shrink: 0;
}
.auth-provider-icon-slot .provider-icon {
  display: inline-flex;
}
.auth-hint {
  display: block;
  padding: 12px 4px 0;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.auth-apikey-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}
.auth-apikey-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.auth-apikey-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  width: 180px;
  font-family: monospace;
}
.auth-apikey-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.auth-apikey-input:disabled {
  opacity: 0.6;
}
.auth-apikey-progress {
  font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
  color: var(--text-muted);
  padding-right: 4px;
}
.auth-apikey-error {
  font-size: 11px;
  color: var(--color-error);
  padding-right: 4px;
}

/* === Key Hint === */
.auth-key-hint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  display: inline-block;
  margin-top: var(--space-xs);
  user-select: none;
}
/* === Model Lane Status Badges === */
.settings-lane-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.settings-lane-badge--override {
  background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent);
}

.settings-lane-badge--inherited {
  background-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
  color: var(--text-muted);
}

.settings-description {
  font-size: 13px;
  color: var(--text-secondary);
  padding-inline: var(--space-xl);
  margin-block: 0 var(--space-md);
  line-height: 1.5;
}
/* === Settings: Model Presets === */
.settings-model-presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.settings-preset-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-preset-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.settings-preset-item-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.settings-preset-item-meta strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.settings-preset-summary {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.settings-preset-item-actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-preset-actions {
  display: flex;
  justify-content: flex-start;
}

.settings-preset-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--btn-border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 85%, var(--card));
}

.settings-preset-editor-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-preset-editor .form-group {
  padding: 0;
}

.settings-preset-editor-actions {
  justify-content: flex-start;
  margin-top: 0;
  padding: 0;
}

.settings-preset-auto-select {
  margin-top: var(--space-sm);
}

.settings-preset-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.settings-preset-size-row {
  padding: 0;
}


@media (max-width: 768px) {
  .settings-update-check {
    flex-wrap: wrap;
    row-gap: var(--space-xs);
  }

  /* Settings modal: use the section picker as the only mobile navigation */
  .settings-layout {
    flex-direction: column;
    min-height: 0;
  }

  .settings-mobile-section-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--btn-border-width) solid var(--border);
    background: var(--surface);
  }

  .settings-mobile-section-picker label {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
  }

  .settings-mobile-section-picker select {
    width: 100%;
  }

  .settings-mobile-section-picker select:focus-visible {
    outline: none;
    border-color: var(--todo);
    box-shadow: var(--focus-ring-strong);
  }

  .settings-sidebar {
    display: none;
  }

  .settings-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .settings-nav-item:hover {
    border-left-color: transparent;
    border-bottom-color: var(--border);
  }

  .settings-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--todo);
  }

  /* Hide group headers on mobile - they don't fit well in horizontal scroll row */
  .settings-group-header {
    display: none;
  }

  .settings-scope-icon {
    margin-right: 0;
  }

  .settings-content {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .settings-content .form-group small {
    overflow-wrap: break-word;
    word-break: break-all;
  }

  .settings-content input,
  .settings-content select,
  .settings-content textarea {
    font-size: 16px;
  }

  .settings-section-heading {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    margin: 0 var(--space-lg) 0;
  }

  .settings-plugins-subsection-toggle {
    display: flex;
    width: 100%;
    padding: 0 var(--space-lg);
  }

  .settings-plugins-subsection-btn {
    flex: 1;
    min-height: 36px;
  }

  .settings-plugins-subsection-panel {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .form-group {
    padding: 0 14px;
  }

  .settings-scope-banner {
    padding: var(--space-sm) var(--space-lg);
  }

  .memory-editor-frame {
    min-height: 45vh;
  }

  .memory-file-summary {
    grid-template-columns: 1fr;
    margin: 0 var(--space-lg) var(--space-md);
  }

  .memory-status-message {
    align-items: stretch;
    flex-direction: column;
  }

  .memory-file-summary span {
    justify-content: flex-start;
  }

  .memory-file-summary small {
    grid-column: auto;
  }

  .settings-description {
    padding: 0 var(--space-lg);
  }

  .settings-content .btn,
  .settings-preset-item-actions .btn {
    min-height: 36px;
  }

  .auth-provider-row {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: var(--space-sm);
  }

  .auth-section-hint {
    margin: 0 14px 12px;
    padding: 10px 14px;
  }

  .auth-provider-group {
    margin-bottom: 12px;
  }

  .auth-group-label {
    padding: 0 14px;
  }

  .auth-provider-card {
    margin: 0 14px 8px;
  }

  .auth-provider-header {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }

  .auth-provider-header > div:not(.auth-provider-info):not(.auth-apikey-section) {
    margin-left: auto;
  }

  .auth-provider-info {
    width: 100%;
    flex-basis: 100%;
  }

  .auth-apikey-section {
    width: 100%;
    flex-basis: 100%;
    align-items: flex-end;
  }

  .auth-apikey-input-row {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .auth-apikey-input {
    flex: 1;
    min-width: 120px;
    width: auto;
  }

  .auth-apikey-input-row .btn {
    flex-shrink: 0;
    margin-left: auto;
  }

  .auth-hint {
    padding: 12px 14px 0;
  }

  /* Settings modal: model preset controls stack cleanly on narrow screens */
  .settings-model-presets {
    gap: var(--space-sm);
  }

  .settings-preset-item {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-sm) var(--space-md);
  }

  .settings-preset-item-actions {
    justify-content: flex-start;
  }

  .settings-preset-editor {
    padding: var(--space-sm) var(--space-md);
  }

  .settings-preset-editor-actions {
    flex-wrap: wrap;
  }

  .settings-preset-size-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}