/* ==================================================================  
   7) USER PROFILE / SETTINGS PAGE (scoped under .userprofile-page)  
   ================================================================== */  
.userprofile-page .settings-container {  
  flex: 1;  
  max-width: 680px;  
  margin: 2rem auto 0 auto;  
  padding: 0 1rem;  
}  
.userprofile-page .profile-header {  
  background: #fff;  
  border-radius: 1rem;  
  box-shadow: 0 2px 18px rgba(255,167,38,0.13);  
  text-align: center;  
  padding: 2rem 1rem;  
  margin-bottom: 1.5rem;  
}  
.userprofile-page .profile-avatar {  
  width: 100px;  
  height: 100px;  
  border-radius: 50%;  
  margin: 0 auto 1rem auto;  
  object-fit: cover;  
}  
.userprofile-page .profile-name {  
  font-size: 1.4rem;  
  font-weight: 700;  
  color: #222;  
  margin-bottom: 0.3rem;  
}  
.userprofile-page .profile-email {  
  font-size: 0.95rem;  
  color: #5d5d5d;  
}  
.userprofile-page .divider {  
  height: 1px;  
  background: #e0e0e0;  
  margin: 1.5rem 0;  
}  
.userprofile-page .section-title {  
  font-size: 1.1rem;  
  font-weight: 600;  
  color: #666;  
  margin-bottom: 0.75rem;  
  text-transform: uppercase;  
  letter-spacing: 0.5px;  
}  
.userprofile-page .preference-row,  
.userprofile-page .account-row {  
  background: #fff;  
  border-radius: 1rem;  
  box-shadow: 0 2px 18px rgba(255,167,38,0.13);  
  margin-bottom: 1.5rem;  
}  
.userprofile-page .preference-item,  
.userprofile-page .account-item {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 0.75rem 1.5rem;  
}  
.userprofile-page .preference-item {  
  opacity: 0.6; /* Coming soon */  
}  
.userprofile-page .preference-item i {  
  font-size: 1.3rem;  
  color: #FFA726;  
  margin-right: 0.75rem;  
}  
.userprofile-page .preference-label {  
  flex: 1 1 auto;  
  font-size: 1rem;  
  color: #333;  
}  
.userprofile-page .preference-toggle {  
  margin-left: 1rem;  
}  
.userprofile-page .preference-text {  
  font-size: 0.9rem;  
  color: #999;  
  margin-left: 0.5rem;  
  font-style: italic;  
}  
.userprofile-page .account-item i {  
  font-size: 1.2rem;  
  color: #FFA726;  
  margin-right: 1rem;  
}  
.userprofile-page .account-label {  
  font-size: 1rem;  
  color: #333;  
}  
.userprofile-page .account-item:not(:last-child) {  
  border-bottom: 1px solid #e0e0e0;  
}  
.userprofile-page .account-item:hover {  
  background: #f1f1f1;  
  cursor: pointer;  
}  
.userprofile-page .logout-row {  
  display: flex;  
  align-items: center;  
  background: #fff;  
  border-radius: 1rem;  
  box-shadow: 0 2px 18px rgba(255,167,38,0.13);  
  padding: 0.8rem 1.5rem;  
  cursor: pointer;  
  transition: background 0.15s;  
  margin-bottom: 1.5rem;  
}  
.userprofile-page .logout-row:hover {  
  background: #f8f8f8;  
}  
.userprofile-page .logout-row i {  
  font-size: 1.2rem;  
  color: #dc3545;  
  margin-right: 1rem;  
}  
.userprofile-page .logout-label {  
  font-size: 1rem;  
  color: #dc3545;  
}  
.userprofile-page .app-version {  
  font-size: 0.85rem;  
  color: #999;  
  text-align: center;  
  margin-top: 1.5rem;  
  font-style: italic;  
}