/* TA 的空间页（好友页点卡片进入）：横幅名字/头像/统计 + 页面细节 */

/* 页面骨架：与动态页同宽同留白（宽版三栏的前提） */
body.page-space main {
  max-width: 1400px;
  margin-top: 18px;
  padding: 0 16px 40px;
}

.sp-name {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  font-family: var(--serif);
  font-size: 22px; font-weight: 700; letter-spacing: .05em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.sp-name-text {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 大号头像：有图显示图，没图按 uid 取色块（与好友页同规则） */
.sp-avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
span.sp-avatar {
  display: grid; place-items: center;
  background: var(--accent);
  background: hsl(var(--av-h, 199) 72% 52%);
  color: #fff; font-weight: 700; font-size: 18px;
}
.sp-avatar--lg { width: 58px; height: 58px; }
span.sp-avatar--lg { font-size: 24px; }

/* 横幅右侧小统计：玻璃片样式与动态页访客卡一致 */
.sp-stats {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sp-stats p {
  margin: 0;
  font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .85);
}
.sp-stats p b { color: #ffd76e; font-family: var(--mono); font-size: 14px; }

@media (max-width: 720px) {
  .sp-stats { gap: 10px; padding: 7px 11px; }
}

/* ---------- 右栏「TA 的资料」卡：头像头部 + 资料行 + 关系徽章 ---------- */

.sp-profile {
  padding: 14px 16px;
  display: grid;
  gap: 11px;
}
.sp-profile-head {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.sp-profile-head .sp-avatar { width: 40px; height: 40px; }
span.sp-profile-head .sp-avatar { font-size: 16px; }
.sp-profile-id {
  flex: 1; min-width: 0;
  display: grid; gap: 1px;
}
.sp-profile-id b {
  font-size: 15px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-profile-id small { font-size: 12px; color: var(--muted); }

/* 签名条：浅底引用块，横幅之外再看一眼 */
.sp-profile-bio {
  margin: 0;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  background: var(--paper-2);
  border-radius: 9px;
  padding: 7px 10px;
}

/* 资料行：标签淡字在左、值正常字体在右（数字统计卡不用，避免等宽蓝字） */
.sp-profile-rows { margin: 0; }
.sp-profile-rows > div {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 13px;
}
.sp-profile-rows > div + div { border-top: 1px dashed var(--rule); }
.sp-profile-rows dt { color: var(--muted); }
.sp-profile-rows dd {
  margin: 0;
  font-weight: 500; color: var(--ink);
  text-align: right;
}

/* 关系 / 身份徽章 */
.sp-chip {
  display: inline-block;
  padding: 2.5px 9px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.sp-chip--ok { background: rgba(13, 159, 134, .13); color: var(--accent-deep); }
.sp-chip--no { background: var(--paper-2); color: var(--muted); }
.sp-chip--me { background: #fdf1d7; color: #8f6a12; }
.sp-chip--role {
  flex: none;
  background: rgba(43, 108, 176, .12); color: #2b6cb0;
}

.sp-profile-foot { margin: 0; font-size: 11px; color: var(--muted); }

/* 空间页资料卡操作区（举报 + 拉黑入口） */
.sp-ops {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
  display: grid; gap: 8px;
}
.sp-act {
  width: 100%;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sp-act:hover { background: var(--paper-2); }
.sp-act--block:hover { background: #fdecea; color: #c0392b; border-color: #f3c1bd; }

/* 最近访客卡片（仅自己的空间显示） */
.sp-visitors .qz-vis-title { margin-bottom: 10px; }
.sp-vis-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.sp-vis-item {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
}
.sp-vis-item small { margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.sp-vis-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3f8;
  font-size: 13px;
  flex: none;
}
.sp-vis-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-vis-toggle { margin-top: 4px; font-size: 12.5px; padding: 7px 0; }

/* ---- 空间装扮：背景层 / 预设渐变 / 主题色点缀 ---- */
.qz-banner { position: relative; }
.sp-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.sp-banner-bg ~ .qz-banner-inner,
.qz-banner .sp-banner-bg + * { position: relative; z-index: 1; }
/* 草原画布之上、内容之下的半透明压暗，保证文字可读 */
.sp-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .38);
}

.sp-bg--sunset { background: linear-gradient(180deg, #ffd29d 0%, #ff9a76 55%, #ff6b6b 100%); }
.sp-bg--ocean  { background: linear-gradient(180deg, #c2f0ff 0%, #74c0fc 60%, #4dabf7 100%); }
.sp-bg--forest { background: linear-gradient(180deg, #d8f5a2 0%, #8ce99a 55%, #51cf66 100%); }
.sp-bg--night  { background: linear-gradient(180deg, #1a2a52 0%, #34495e 60%, #4b6584 100%); }
.sp-bg--candy  { background: linear-gradient(180deg, #ffdeeb 0%, #f3d9ff 55%, #d0bfff 100%); }
/* 新增预设：多层背景（光斑/星点叠加在渐变上），切换即用不用传图 */
.sp-bg--aurora {
  background:
    radial-gradient(1100px 420px at 18% -12%, rgba(72, 255, 199, .42), transparent 62%),
    radial-gradient(900px 480px at 86% 4%, rgba(151, 120, 255, .45), transparent 58%),
    linear-gradient(180deg, #101c2c 0%, #183a4d 55%, #1f4a5e 100%);
}
.sp-bg--sakura {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .85) 2.5px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(255, 255, 255, .55) 1.8px, transparent 2.2px) 23px 23px / 46px 46px,
    linear-gradient(180deg, #fff0f5 0%, #ffd6e3 55%, #ffb3c9 100%);
}
.sp-bg--starry {
  background:
    radial-gradient(1.6px 1.6px at 16px 28px, rgba(255, 255, 255, .95), transparent 100%),
    radial-gradient(1.2px 1.2px at 64px 12px, rgba(255, 255, 255, .8), transparent 100%),
    radial-gradient(1.4px 1.4px at 92px 52px, rgba(255, 255, 255, .9), transparent 100%),
    radial-gradient(1px 1px at 38px 66px, rgba(255, 255, 255, .7), transparent 100%),
    linear-gradient(180deg, #171536 0%, #28205e 55%, #3a2f84 100%);
  background-size: 110px 84px, 110px 84px, 110px 84px, 110px 84px, auto;
}
.sp-bg--mint  { background: linear-gradient(180deg, #dff7ec 0%, #9fe6c8 55%, #5fd3ad 100%); }
.sp-bg--peach { background: linear-gradient(180deg, #fff3e2 0%, #ffd3a8 55%, #ffab84 100%); }
.sp-bg--dawn  { background: linear-gradient(180deg, #dbeafe 0%, #e8d9ff 45%, #ffd9e8 100%); }

/* 主题色点缀：空间名与访客卡标题取 --sp-accent */
[style*="--sp-accent"] .qz-space-name { color: var(--sp-accent); }
[style*="--sp-accent"] .sp-visitors .qz-vis-title i { color: var(--sp-accent); }

/* 装扮设置页的预览条与色板 */
.set-bg-demo {
  height: 74px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px 12px;
  margin-bottom: 14px;
  color: rgba(0, 0, 0, .55);
  font-size: 12px;
  background: #f3f6fa;
}
.set-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set-swatch {
  border: 1px solid var(--rule);
  background: #f3f6fa;
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.set-swatch.on {
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .18);
}
.set-swatch--dot { min-width: 46px; height: 32px; color: #fff; font-size: 12px; }
/* 预设背景卡片网格：色块 + 名字，点一下直接生效 */
.set-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.set-bg-card {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.set-bg-card:hover { transform: translateY(-1px); }
.set-bg-card .set-bg-card-demo { height: 48px; border-radius: 8px; }
.set-bg-card span {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.4;
}
.set-bg-card.on {
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .18);
}
.set-bg-card.on span { color: var(--ink); font-weight: 600; }
.set-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  margin: 9px 0;
  cursor: pointer;
}
.set-switch input { width: 17px; height: 17px; accent-color: var(--accent, #3b82f6); }