body {
  min-height: 100vh;
  background-attachment: fixed;
  transition: background 0.25s ease;
}

body.app-theme-clair {
  background: linear-gradient(180deg, #f8f9fa 0%, #eef5ff 100%);
  --navbar-bg: #2d4f8f;
}

body.app-theme-ocean {
  background: linear-gradient(180deg, #eaf6ff 0%, #dceeff 100%);
  --navbar-bg: #0f4c81;
}

body.app-theme-sable {
  background: linear-gradient(180deg, #fff7e8 0%, #ffefcf 100%);
  --navbar-bg: #8b5a2b;
}

body.app-theme-lavande {
  background: linear-gradient(180deg, #f4f0ff 0%, #e7ddff 100%);
  --navbar-bg: #5a4a9c;
}

body.app-theme-foret {
  background: linear-gradient(180deg, #edf8f0 0%, #d5eddc 100%);
  --navbar-bg: #2f6f4f;
}

body.app-theme-sunset {
  background: linear-gradient(180deg, #fff0e8 0%, #ffd9c7 100%);
  --navbar-bg: #b2542d;
}

body.app-theme-nuit {
  background: linear-gradient(180deg, #202532 0%, #2c3446 100%);
  --navbar-bg: #161c28;
}

body.app-theme-emerald {
  background: linear-gradient(180deg, #e9fff7 0%, #c9f6e6 100%);
  --navbar-bg: #1f6f63;
}

body.app-theme-pearl {
  background: linear-gradient(180deg, #fafafa 0%, #eceef1 100%);
  --navbar-bg: #4a5568;
}

body.app-theme-coral {
  background: linear-gradient(180deg, #fff0ef 0%, #ffd7d3 100%);
  --navbar-bg: #a8465a;
}

body.app-theme-cobalt {
  background: linear-gradient(180deg, #ecf1ff 0%, #d6e1ff 100%);
  --navbar-bg: #2a4f9b;
}

body.app-theme-mint {
  background: linear-gradient(180deg, #edfff8 0%, #d3f7e8 100%);
  --navbar-bg: #2b6f63;
}

body.app-theme-rose {
  background: linear-gradient(180deg, #fff1f8 0%, #ffdced 100%);
  --navbar-bg: #8b3d67;
}

body.app-theme-amber {
  background: linear-gradient(180deg, #fff8e8 0%, #ffe8bf 100%);
  --navbar-bg: #8a5a00;
}

body.app-theme-slate {
  background: linear-gradient(180deg, #f0f3f7 0%, #dde4ed 100%);
  --navbar-bg: #334e68;
}

.theme-navbar {
  background-color: var(--navbar-bg, #0d6efd) !important;
  transition: background-color 0.25s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.card {
  border: 0;
  border-radius: 0.8rem;
}

.profile-theme-clair {
  background: linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);
}

.profile-theme-ocean {
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe9ff 100%);
}

.profile-theme-sable {
  background: linear-gradient(135deg, #fff7e8 0%, #ffe8c2 100%);
}

.profile-theme-lavande {
  background: linear-gradient(135deg, #f5f1ff 0%, #eadfff 100%);
}

.profile-theme-foret {
  background: linear-gradient(135deg, #effbf2 0%, #d8efde 100%);
}

.profile-theme-sunset {
  background: linear-gradient(135deg, #fff2eb 0%, #ffd9ca 100%);
}

.profile-theme-nuit {
  background: linear-gradient(135deg, #2a3144 0%, #1f2433 100%);
  color: #e9eef8;
}

.profile-theme-emerald {
  background: linear-gradient(135deg, #ebfff7 0%, #cdf6e8 100%);
}

.profile-theme-pearl {
  background: linear-gradient(135deg, #ffffff 0%, #eceff3 100%);
}

.profile-theme-coral {
  background: linear-gradient(135deg, #fff3f1 0%, #ffd9d3 100%);
}

.profile-theme-cobalt {
  background: linear-gradient(135deg, #edf2ff 0%, #d7e3ff 100%);
}

.profile-theme-mint {
  background: linear-gradient(135deg, #effff9 0%, #d6f8e9 100%);
}

.profile-theme-rose {
  background: linear-gradient(135deg, #fff3fa 0%, #ffe0ee 100%);
}

.profile-theme-amber {
  background: linear-gradient(135deg, #fff9ed 0%, #ffebc8 100%);
}

.profile-theme-slate {
  background: linear-gradient(135deg, #f4f7fb 0%, #dfe7f0 100%);
}

.profile-submenu {
  gap: 0.5rem;
}

.profile-submenu .nav-link {
  border-radius: 999px;
  padding: 0.45rem 1rem;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.theme-option {
  display: block;
  border: 1px solid #d9dee6;
  border-radius: 0.7rem;
  padding: 0.6rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.theme-option.active {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12);
  transform: translateY(-1px);
}

.theme-option input {
  display: none;
}

.theme-swatch {
  display: block;
  height: 48px;
  border-radius: 0.5rem;
  margin-bottom: 0.45rem;
}

.theme-name {
  font-size: 0.9rem;
  font-weight: 600;
}