/* ============================================================
   User 用户模块共享样式
   视觉与主站 / 摄影模块呼应（深色半透明导航 + 蓝紫渐变 + 圆角卡片）
   ============================================================ */
:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #a5b4fc;
  --dark: #0b1220;
  --dark-2: #111c33;
  --text: #0f172a;
  --muted: #64748b;
  --bg: #f6f8fc;
  --card: #ffffff;
  --border: #e2e8f0;
  --danger: #dc2626;
  --success-text: #065f46;
  --success-bg: #ecfdf5;
  --error-text: #991b1b;
  --error-bg: #fef2f2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { text-decoration: none; color: inherit; }

/* ===== 顶部导航 =====
   已改为全站统一导航组件（Site/nav.py + /static/site/site.css）；
   旧的 .unav / .unav-link 规则已删除，页面中已无引用。===== */

/* ===== 页面主体 ===== */
.uwrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 24px;
}
.ucard {
  width: 100%; max-width: 460px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15,23,42,.10);
  padding: 36px 38px;
}
.ucard-wide { max-width: 560px; }
.ucard h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.5px; }
.ucard .sub { color: var(--muted); font-size: .92rem; margin: 8px 0 24px; }

/* ===== 表单 ===== */
.field { margin-bottom: 16px; }
label { display: block; margin: 0 0 6px; font-size: .86rem; font-weight: 600; }
label .req { color: var(--danger); }
.uinput {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: .95rem; font-family: inherit;
  background: #fff; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.uinput:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}
.code-row { display: flex; gap: 10px; align-items: flex-end; }
.code-row .uinput { flex: 1; }
.code-row .field { flex: 1; }

.btn-code {
  flex-shrink: 0;
  padding: 11px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--primary);
  font-size: .88rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; margin-bottom: 16px;
  transition: background .15s, border-color .15s;
}
.btn-code:hover:not(:disabled) { border-color: var(--primary); background: rgba(59,130,246,.06); }
.btn-code:disabled { opacity: .55; cursor: not-allowed; }

.btn-main {
  width: 100%; margin-top: 6px; padding: 13px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-main:hover { background: var(--primary-hover); }
.btn-main:disabled { opacity: .6; cursor: not-allowed; }

.msg {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  font-size: .9rem; display: none;
}
.msg.show { display: block; }
.msg.success { background: var(--success-bg); color: var(--success-text); }
.msg.error { background: var(--error-bg); color: var(--error-text); }

.auth-alt {
  margin-top: 22px; text-align: center;
  color: var(--muted); font-size: .9rem;
}
.auth-alt a { color: var(--primary); font-weight: 600; }
.auth-alt a:hover { color: var(--primary-hover); }
.hint { margin-top: 6px; font-size: .8rem; color: var(--muted); }

/* ===== 用户详情 ===== */
.profile-head {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; font-size: 1.9rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-head h2 { font-size: 1.4rem; font-weight: 800; }
.profile-head .uemail { color: var(--muted); font-size: .92rem; }

.info-list { list-style: none; }
.info-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.info-list li:last-child { border-bottom: none; }
.info-list .k { color: var(--muted); flex-shrink: 0; }
.info-list .v { font-weight: 600; text-align: right; word-break: break-all; }

.profile-actions {
  margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;
}
.profile-actions .btn-main { width: auto; margin-top: 0; padding: 11px 22px; }
.btn-outline {
  flex: 1;
  min-width: 130px;
  padding: 11px 22px; text-align: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text);
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s;
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { color: var(--danger) !important; border-color: #fecaca; }
.btn-danger:hover { border-color: var(--danger); }

/* ===== 页脚 ===== */
.ufoot {
  background: var(--dark); color: #94a3b8;
  text-align: center; padding: 26px 24px;
  font-size: .85rem;
}
.ufoot b { color: #fff; }

/* ===== 头像（首字母彩底，见 User/avatar.py）===== */
.avatar-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.avatar-row #avatar-preview { flex-shrink: 0; }
.avatar-opts {
  display: grid; grid-template-columns: repeat(6, 44px); gap: 10px;
}
.avatar-opt {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 50%;
  background: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.avatar-opt:hover { transform: scale(1.08); }
.avatar-opt.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* 个人中心：更换头像区块 */
.change-avatar {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.change-avatar h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.change-avatar .change-sub { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.change-avatar .avatar-opt { width: 46px; height: 46px; }
.change-avatar .avatar-opts { grid-template-columns: repeat(6, 46px); }
.change-avatar .save-row { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.change-avatar .btn-main { width: auto; padding: 10px 24px; margin-top: 0; }

@media (max-width: 560px) {
  .ucard { padding: 28px 22px; }
  .code-row { flex-direction: column; align-items: stretch; }
  .btn-code { width: 100%; margin-bottom: 0; }
  .avatar-opts, .change-avatar .avatar-opts { grid-template-columns: repeat(5, 44px); }
  .change-avatar .avatar-opts { grid-template-columns: repeat(5, 46px); }
}

/* ===== 个人中心：角色徽标 / 管理块 ===== */
.role-badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .3px;
}
.role-badge.admin { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.role-badge.user { color: #475569; background: #f1f5f9; border: 1px solid var(--border); }

.manage-block {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.manage-block h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.manage-block .change-sub { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.manage-block .change-sub b { color: var(--text); }
.manage-block a.btn-main, .manage-block a.btn-outline { display: inline-block; width: auto; }
.btn-inline { padding: 10px 20px; }