.header-actions {
  display: flex;
  gap: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
.settings-panel { margin-top: 24px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.settings-panel .button { margin: 6px 8px 6px 0; }
.update-banner { position: fixed; inset: auto 16px 16px; z-index: 10; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--brand-dark); color: white; box-shadow: var(--shadow); }
.update-banner button { margin-left: 10px; border: 0; border-radius: 999px; padding: 8px 12px; background: var(--brand-accent); color: var(--brand-dark); font-weight: 800; }
.offline-readiness { margin: 18px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #fff4dd; color: #5c3c08; font-weight: 700; }
.offline-readiness.ready { background: #e7f3e9; color: #204b2a; }
.offline-readiness.failed { cursor: pointer; background: #f8e5df; color: #7c2f20; }

@media (min-width: 680px) {
  .settings-grid {
    grid-template-columns: 1fr 1fr;
  }
}