/* ===============================
   SETTINGS HEADER (GLOBAL MATCH)
================================ */

.settings-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 56px;                 /* EXACT global header height */
  background: #0b4bb3;          /* same blue */

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;

  z-index: 10;
}

.settings-header-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.settings-header-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
}

/* Content offset below header */
.settings-page {
  padding-top: 70px;            /* 56px header + safe gap */
}

/* ===============================
   SETTINGS CARD
================================ */

.settings-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* Item */
.setting-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.setting-item:last-child {
  border-bottom: none;
}

/* Icon */
.setting-item .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-item .icon img {
  width: 40px;
  height: 40px;
}

/* Text */
.setting-item .text strong {
  display: block;
  font-size: 15px;
}

.setting-item .text small {
  font-size: 13px;
  color: #9ca3af;
}

/* Icon colors */
.icon.blue   { background:#e8f0ff; }
.icon.orange{ background:#fff1e6; }
.icon.cyan  { background:#e6f7ff; }
.icon.pink  { background:#ffe6ef; }
.icon.green { background:#e9f9ef; }
.icon.purple{ background:#f1eaff; }
.icon.yellow{ background:#fff6db; }
.icon.violet{ background:#f3e8ff; }