/* Preferences is the shared visual baseline; each page owns its title and actions. */
body[data-settings-page] {
  --settings-radius: 5px;
  --settings-surface: var(--bostic-surface-raised, #fff);
  --settings-border: var(--bs-border-color);
  --settings-shadow: 0 12px 30px rgba(27, 36, 50, 0.07);
}

body[data-settings-page][data-pc-theme="dark"] {
  --settings-surface: var(--bostic-surface-raised, #232c38);
  --settings-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

body[data-settings-page] #bostic-app-content {
  width: min(100%, 92rem);
  margin-inline: auto;
}

body[data-settings-page] .settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 0;
  min-height: 116px;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--settings-border);
  border-left: 3px solid var(--bs-primary);
  border-radius: var(--settings-radius);
  background: var(--settings-surface);
  box-shadow: var(--settings-shadow);
}

.settings-heading-copy { display: flex; align-items: center; gap: 0.95rem; min-width: 0; }
.settings-heading-copy > div { display: grid; gap: 0.25rem; min-width: 0; }
.settings-heading-copy .badge { width: fit-content; margin: 0; white-space: normal; text-align: start; }
.settings-heading-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 56px;
  height: 56px;
  border-radius: var(--settings-radius);
  color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 10%, var(--settings-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 25%, transparent);
  font-size: 1.55rem;
}
body[data-settings-page] .settings-heading h1 { margin: 0; color: var(--bs-emphasis-color); font-size: 1.8rem; line-height: 1.25; letter-spacing: 0; }
body[data-settings-page] .settings-heading p { margin: 0; color: var(--bs-secondary-color); font-size: 0.875rem; line-height: 1.55; overflow-wrap: anywhere; }
.settings-heading > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 0 0 auto; min-height: 44px; white-space: normal; }
.settings-heading > .settings-status { flex-shrink: 0; white-space: normal; }

/* Card corners only: leave avatars, switches and status pills rounded. */
body[data-settings-page] #bostic-app-content :is(.card, .settings-state, .settings-danger-list > div,
  .profile-surface, .profile-state, .profile-settings-shortcuts,
  .preferences-panel, .preferences-actions, .preferences-state,
  .notifications-panel, .notifications-state, .notifications-required-note, .notifications-channel-note, .notifications-table-wrap, .notifications-history-table tr,
  .security-identity, .security-password, .security-password-form, .security-access, .security-factor, .security-sessions, .security-state,
  .activity-records, .activity-empty, .agreement-document) {
  border-radius: var(--settings-radius);
}
body[data-settings-page] .security-section-heading { border-radius: var(--settings-radius) var(--settings-radius) 0 0; }
body[data-settings-page] .privacy-footer { border-radius: 0 0 var(--settings-radius) var(--settings-radius); }
body[data-settings-page] .profile-actions { border-bottom-left-radius: var(--settings-radius); }
body[data-settings-page] :is(.profile-surface, .activity-records) { overflow: hidden; }
body[data-settings-page] :is(.privacy-page, .agreements-page) { display: grid; gap: 16px; }
body[data-settings-page] :is(.privacy-page, .agreements-page) > .card { margin-bottom: 0; }

@media (max-width: 767.98px) {
  body[data-settings-page] .settings-heading { flex-wrap: wrap; gap: 1rem; }
  .settings-heading-copy { flex: 1 1 100%; align-items: flex-start; }
}
@media (max-width: 429.98px) {
  body[data-settings-page] .settings-heading { padding: 0.85rem; }
  body[data-settings-page] .settings-heading h1 { font-size: 1.55rem; }
  .settings-heading-icon { flex-basis: 48px; height: 48px; font-size: 1.35rem; }
  .settings-heading > .btn { width: 100%; }
}