/* profile.css —— 个人中心 + 设置页 */

/* ====================== 个人中心页 ====================== */
.profile-banner {
  height: 220px;
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 55%, #7e57c2 130%);
  background-size: cover; background-position: center;
  position: relative; overflow: hidden; cursor: pointer;
}
.profile-banner::after {
  content: '棱 镜 · P R I S M'; position: absolute; right: 16px; bottom: 10px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 4px;
  color: rgba(255,255,255,0.5); font-weight: 700;
}
.profile-banner.has-custom::after { display: none; } /* 换了自定义封面图后，不再叠原来的文字水印 */
.profile-banner.has-custom { background-color: #000; } /* 图片加载出来前给个深色底，避免闪白 */
.profile-banner-hint {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 11px; color: #fff; background: rgba(0,0,0,0.38);
  padding: 4px 10px; border-radius: 12px; letter-spacing: .3px;
  backdrop-filter: blur(2px);
}
.profile-card {
  background: var(--bg-card); margin: -36px 12px 0; border-radius: 14px;
  padding: 16px; box-shadow: 0 4px 16px rgba(20,40,70,0.1); position: relative;
}
.profile-header { display: flex; align-items: flex-start; gap: 12px; }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: #e1f5fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; flex-shrink: 0; color: var(--accent);
  position: relative; border: 3px solid var(--bg-card); box-shadow: 0 2px 8px rgba(20,40,70,0.12);
  margin-top: -30px;
}
.profile-avatar::after {
  content: '📷'; position: absolute; bottom: -2px; right: -2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; box-shadow: var(--shadow);
}
.profile-header-info { flex: 1; min-width: 0; padding-top: 4px; }
.profile-info-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; font-family: var(--font-display); color: var(--text-title); }
.profile-info-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-info-account { font-size: 12px; color: var(--text-tip); }
.profile-info-location { font-size: 12px; color: var(--text-tip); }
.btn-edit-profile {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--primary-light); border-radius: 14px; padding: 6px 12px;
  display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap;
  margin-top: 4px;
}
.btn-edit-profile:active { background: #e1f5fe; }
.profile-info-bio { font-size: 13px; color: var(--text-body); line-height: 1.5; margin-top: 10px; }
.profile-level-chip { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.profile-level-chip span {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: #e1f5fe; padding: 3px 9px; border-radius: 10px;
}
.profile-stats-row {
  display: flex; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light);
}
.profile-stat-item { flex: 1; text-align: center; }
.profile-stat-item .stat-num { display: block; font-size: 16px; font-weight: 700; color: var(--text-title); font-family: var(--font-display); }
.profile-stat-item .stat-label { display: block; font-size: 11.5px; color: var(--text-tip); margin-top: 2px; }

.profile-quick-cards { display: flex; gap: 10px; margin: 12px 12px 0; }
.quick-card {
  flex: 1; background: var(--bg-card); border-radius: 12px; padding: 12px;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); cursor: pointer;
}
.quick-card:active { background: #f5f7fa; }
.quick-card-icon {
  width: 34px; height: 34px; border-radius: 9px; background: #e1f5fe;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.quick-card-title { font-size: 13px; font-weight: 700; color: var(--text-title); }
.quick-card-sub { font-size: 11px; color: var(--text-tip); margin-top: 1px; }
.quick-card-sub.todo { color: var(--alert); font-weight: 700; }

.profile-tabs {
  display: flex; margin: 16px 12px 0; border-bottom: 1px solid var(--border-light);
}
.profile-tab {
  flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: var(--text-tip);
  position: relative; cursor: pointer;
}
.profile-tab.active { color: var(--text-title); font-weight: 700; }
.profile-tab.active::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 2px; background: var(--primary);
}
.profile-tab-content { padding: 12px; }

/* 设置下拉小菜单（点击右上角齿轮弹出） */
.profile-settings-menu {
  position: absolute; top: 50px; right: 12px; z-index: 50; display: none; flex-direction: column;
  background: var(--bg-card); border-radius: 10px; box-shadow: 0 6px 18px rgba(20,40,70,0.18);
  overflow: hidden; min-width: 120px;
}
.settings-menu-item {
  padding: 12px 16px; font-size: 14px; color: var(--text-title);
  text-align: center; border-bottom: 1px solid var(--border-light); cursor: pointer;
}
.settings-menu-item:last-child { border-bottom: none; }
.settings-menu-item:active { background: var(--bg-page); }
.settings-menu-item.logout { color: var(--alert); font-weight: 700; }

/* “回复”tab：我在别人帖子下面发过的评论列表 */
.reply-item {
  background: var(--bg-card); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px; box-shadow: var(--shadow); cursor: pointer;
}
.reply-item:active { background: #f5f7fa; }
.reply-item-text { font-size: 14px; color: var(--text-title); line-height: 1.5; margin-bottom: 6px; }
.reply-item-origin { font-size: 12px; color: var(--text-tip); line-height: 1.4; }
.reply-item-origin-author { color: var(--accent); }

/* ====================== 设置页 ====================== */
.settings-section-title {
  font-size: 12px; color: var(--text-tip); padding: 16px 16px 6px; letter-spacing: .3px;
}
.settings-list {
  background: var(--bg-card); margin: 0 12px; border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow);
}
.settings-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 14px; color: var(--text-title);
  border-bottom: 1px solid var(--border-light);
}
.settings-item:last-child { border-bottom: none; }
.settings-item-value { font-size: 13px; color: var(--text-tip); }
.settings-item.clickable { cursor: pointer; }
.settings-item.clickable:active { background: var(--bg-page); }
.settings-item-arrow { color: var(--text-tip); font-size: 13px; }

/* 开关组件 */
.settings-toggle {
  width: 42px; height: 24px; border-radius: 12px; background: var(--border-light);
  position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.settings-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left .2s;
}
.settings-toggle.on { background: var(--primary); }
.settings-toggle.on::after { left: 20px; }

.settings-danger-btn {
  margin: 20px 12px 0; text-align: center; padding: 13px; border-radius: 10px;
  background: var(--bg-card); color: var(--alert); font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow); cursor: pointer;
}
.settings-danger-btn:active { background: #f5f7fa; }
.settings-version-text {
  text-align: center; font-size: 12px; color: var(--text-tip);
  margin-top: 20px; padding-bottom: 20px;
}