.h5-.h5-page{
  background: var(--bg);
}

.container {
  min-height: 100vh;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}


.user-header {
  display: flex; align-items: center;
  gap: 12px;
  padding: 24px 16px 18px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.uh-avatar-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.4);
  overflow: hidden;
}
.uh-avatar-img { width: 100%; height: 100%; border-radius: 50%; }
.uh-avatar-char {
  font-size: 19px; font-weight: 700; color: #fff;
}
.uh-info { flex: 1; }
.uh-name {
  display: block; font-size: 17px; font-weight: 700;
  color: #fff; letter-spacing: -0.3px;
}
.uh-hint {
  display: block; font-size: 12px; color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

.settings-status-strip{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px;
  padding:9px 10px 0;
}
.settings-status-card{
  padding:10px;
  border-radius:9px;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.05);
}
.settings-status-label{display:block;font-size:11px;color:var(--text-muted);}
.settings-status-value{display:block;margin-top:5px;font-size:14px;font-weight:800;color:var(--text-primary);}


.settings-section-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  padding: 14px 16px 6px;
  letter-spacing: 0.5px;
}


.settings-list {
  margin: 0 10px;
  background: #fff;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,0.04);
}

.si-item {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  border-bottom: 0.5px solid rgba(0,0,0,0.04);
  position: relative;
  transition: background .18s ease, transform .18s ease;
}
.si-item:active { background: #F8FAFD; transform: scale(.995); }
.si-item:last-child { border-bottom: none; }
.si-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }


.si-icon-box {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.si-icon-box.blue    { background: #E3F2FD; }
.si-icon-box.green   { background: #E8F8ED; }
.si-icon-box.purple  { background: #F3E8FB; }
.si-icon-box.red     { background: #FFEBEE; }
.si-icon-box.orange  { background: #FFF3E0; }
.si-icon-box.info-blue{ background: #E1F5FE; }
.si-icon-box.vip-purple { background: linear-gradient(135deg, #F3E8FB, #EDE7F6); }
.si-emoji { font-size: 16px; line-height: 1; }

.si-text { flex: 1; min-width: 0; overflow: hidden; }
.si-h4 {
  display: block; font-size: 14.5px; font-weight: 600;
  color: var(--text-primary); letter-spacing: -0.2px;
}
.si-p {
  display: block; font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.si-arrow {
  font-size: 16px; color: #c7c7cc; font-weight: 300;
  flex-shrink: 0; margin-left: 6px;
}
.si-right-extra { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.si-badge {
  font-size: 10px; color: #fff; background: #FF9500;
  padding: 1px 7px; border-radius: 8px; font-weight: 500;
}


.back-home-area {
  padding: 15px 12px 0;
}
.back-home-btn {
  width: 100%; height: 46px; border-radius: 11px;
  background: linear-gradient(135deg, #4A90D9, #67B7FF);
  color: #fff; font-size: 15.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 5px; border: none; box-shadow: 0 3px 10px rgba(74,144,217,0.35);
  letter-spacing: 0.5px;
}
.back-home-btn:active { transform: scale(.985); }
.bh-icon { font-size: 16px; }


.logout-area { padding: 12px 12px 30px; }
.logout-btn {
  width: 100%; height: 44px; border-radius: 11px;
  background: transparent; color: #FF3B30;
  font-size: 14.5px; font-weight: 500; border: 0.5px solid #FFCDD2;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.5px;
}
.logout-btn:active { background: rgba(255,59,48,0.05); }
.secondary-service-strip{opacity:.78}
.secondary-service-title{color:#9aa3af}
.secondary-service-item{opacity:.72}


.container{background:#F7FAFC}
.user-header,.settings-list,.settings-status-card{
  background:#fff;
  border:0.5px solid #E7EDF4;
  box-shadow:0 6px 15px rgba(15,23,42,.06);
}
.uh-avatar-circle,.back-home-btn{background:#24A26B!important}
.si-h4,.uh-name,.settings-status-value{color:#172033}
.si-p,.settings-status-label,.uh-hint{color:#667386}
.si-icon-box.blue,.si-icon-box.green,.si-icon-box.purple,.si-icon-box.red,.si-icon-box.orange,.si-icon-box.info-blue,.si-icon-box.vip-purple{background:#F1F6FA;color:#172033}

.si-badge,.settings-status-value{
  min-height:22px;
  padding:4px 9px;
  border-radius:499.5px;
  box-sizing:border-box;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  white-space:nowrap;
}
.si-badge{background:#FFF4DC;color:#B86B00}


.container{
  background:
    radial-gradient(circle at 12% 4%, rgba(239,154,130,.16), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(255,213,154,.2), transparent 28%),
    linear-gradient(180deg,#FFF8F1 0%,#FFFDF8 100%);
}
.user-header,.settings-list,.settings-status-card{
  background:rgba(255,255,255,.9);
  border-color:#F0DDD2;
  box-shadow:0 8px 17px rgba(140,84,58,.08);
}
.uh-avatar-circle,.back-home-btn{background:linear-gradient(135deg,#E39176,#D9826B)!important}
.si-h4,.uh-name,.settings-status-value{color:#3B2A25}
.si-p,.settings-status-label,.uh-hint,.settings-section-title{color:#8A746B}
.si-icon-box.blue,.si-icon-box.green,.si-icon-box.purple,.si-icon-box.red,.si-icon-box.orange,.si-icon-box.info-blue,.si-icon-box.vip-purple{background:#FFF4EA;color:#5A3B31}
.si-badge{background:#FFF5DF;color:#B87825}
.logout-btn{color:#D94B55;border-color:#F2C7C9}