/* =========================================================
   像素志 PIXEL LOG — Phase 3 用户互动体系样式
   复用 style.css 的主题变量: --surface --line --bd --sp --shadow
   --ink --ink-soft --primary --accent --green
   ========================================================= */

/* ---------- 导航用户菜单 ---------- */
.user-menu { position: relative; display: inline-flex; }
.user-menu .avatar-btn {
  position: relative; border: none; background: none; cursor: pointer;
  padding: 0; display: inline-flex; line-height: 0;
}
.user-menu .avatar-btn svg { width: 34px; height: 34px; border-radius: 6px; }
.user-menu__badge {
  position: absolute; top: -5px; right: -5px; background: var(--accent);
  color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; font-weight: 700;
}
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 210px;
  background: var(--surface); border: var(--bd) solid var(--line);
  box-shadow: var(--sp) var(--sp) 0 var(--shadow); padding: 6px; display: none; z-index: 60;
}
.user-menu__panel.open { display: block; }
.user-menu__head { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.user-menu__head svg { width: 40px; height: 40px; border-radius: 6px; }
.user-menu__name { font-weight: 700; font-size: 14px; color: var(--ink); }
.user-menu__lv { font-size: 11px; margin-top: 2px; }
.user-menu__item {
  display: block; padding: 9px 10px; color: var(--ink); text-decoration: none;
  font-size: 13px; border-radius: 4px;
}
.user-menu__item:hover { background: var(--surface-2); }

.nav-auth { display: flex; gap: 8px; }
.nav-auth .btn { padding: 7px 14px; }

/* ---------- 通用容器 ---------- */
.px-wrap { max-width: 880px; margin: 30px auto; padding: 0 16px; }
.px-wide { max-width: 1080px; }
.px-card {
  background: var(--surface); border: var(--bd) solid var(--line);
  box-shadow: var(--sp) var(--sp) 0 var(--shadow); padding: 22px; margin-bottom: 20px;
}
.px-card h2 { font-family: var(--font-pixel); font-size: 14px; margin: 0 0 16px; }
.px-card h3 { font-size: 14px; margin: 0 0 12px; color: var(--ink); }

/* ---------- 按钮变体 ---------- */
.btn--sm { padding: 7px 14px; font-size: 13px; }
.btn--block { width: 100%; justify-content: center; }
.btn--ghost { background: transparent; border: var(--bd) solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); }

/* ---------- 表单 ---------- */
.px-field { margin-bottom: 14px; }
.px-field label { display: block; font-size: 12px; margin-bottom: 6px; color: var(--ink-soft); }
.px-field input, .px-field textarea, .px-field select {
  width: 100%; padding: 10px 12px; border: var(--bd) solid var(--line);
  background: var(--surface-2); color: var(--ink); font-family: var(--font-body); font-size: 14px; outline: none;
}
.px-field input:focus, .px-field textarea:focus, .px-field select:focus { border-color: var(--primary); }
.px-field textarea { min-height: 90px; resize: vertical; }
.px-row { display: flex; gap: 14px; flex-wrap: wrap; }
.px-row .px-field { flex: 1; min-width: 200px; }
.px-tip { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.px-msg { font-size: 13px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); }
.px-msg--ok { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
.px-msg--err { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---------- 徽章 / 标签 ---------- */
.px-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px;
  border-radius: 20px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.px-badge--verify { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: var(--primary); }
.px-badge--lv { font-weight: 700; }

/* ---------- 用户中心头部 ---------- */
.uc-head { display: flex; gap: 18px; align-items: center; }
.uc-head__avatar svg { width: 76px; height: 76px; border-radius: 10px; }
.uc-head__name { font-size: 20px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.uc-head__meta { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.uc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 18px; }
.uc-stat { background: var(--surface-2); border: 1px solid var(--line); padding: 12px; text-align: center; }
.uc-stat__num { font-size: 20px; font-weight: 700; color: var(--primary); }
.uc-stat__label { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- 等级进度条 ---------- */
.lv-bar { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.lv-bar__fill { height: 100%; background: var(--primary); transition: width .4s; }
.lv-text { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Tab 切换 ---------- */
.px-tabs { display: flex; gap: 6px; border-bottom: var(--bd) solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.px-tab { padding: 9px 14px; font-size: 13px; color: var(--ink-soft); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; }
.px-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.px-panel { display: none; }
.px-panel.is-active { display: block; }

/* ---------- 列表项 ---------- */
.px-list { list-style: none; padding: 0; margin: 0; }
.px-list li { padding: 12px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 12px; align-items: center; }
.px-list li:last-child { border-bottom: none; }
.px-list .px-list__main { flex: 1; min-width: 0; }
.px-list .px-list__title { font-size: 14px; color: var(--ink); text-decoration: none; }
.px-list .px-list__sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.px-list .px-list__time { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.px-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; font-size: 13px; }

/* ---------- 头像小图 ---------- */
.avatar-sm svg { width: 36px; height: 36px; border-radius: 6px; }

/* ---------- 响应式 ---------- */
@media (max-width: 600px) {
  .uc-head { flex-direction: column; text-align: center; }
  .px-row { flex-direction: column; }
}

/* ---------- 通用 badge（用户主页/文章/后台复用） ---------- */
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); vertical-align: middle; }
.badge--verify { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: var(--primary); }
.badge--lv { font-weight: 700; color: var(--ink); }

/* ---------- 按钮 mini ---------- */
.btn--mini { padding: 5px 10px; font-size: 12px; }

/* ---------- 用户主页 u.php ---------- */
.uc-profile { display: flex; gap: 22px; align-items: center; background: var(--surface); border: var(--bd) solid var(--line); box-shadow: var(--sp) var(--sp) 0 var(--shadow); padding: 24px; flex-wrap: wrap; }
.uc-avatar svg { width: 84px; height: 84px; border-radius: 12px; }
.uc-meta { flex: 1; min-width: 240px; }
.uc-name { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-bio { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.uc-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.uc-stats b { color: var(--ink); font-size: 15px; }
.uc-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

/* ---------- 文章作者卡片 ---------- */
.author-card { display: flex; gap: 14px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); padding: 16px; border-radius: 10px; }
.author-card__avatar svg { width: 54px; height: 54px; border-radius: 8px; }
.author-card__info h4 { margin: 0 0 4px; font-size: 15px; }
.author-card__info h4 a { color: var(--ink); text-decoration: none; }
.author-card__info p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.act-btn--tip { color: var(--primary); }

/* ---------- 打赏弹窗 ---------- */
.tip-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); align-items: center; justify-content: center; z-index: 90; padding: 16px; }
.tip-modal__box { background: var(--surface); border: var(--bd) solid var(--line); box-shadow: var(--sp) var(--sp) 0 var(--shadow); padding: 24px; width: 340px; max-width: 100%; position: relative; }
.tip-modal__box h3 { margin: 0 0 16px; font-size: 15px; }
.tip-modal__close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; color: var(--ink-soft); cursor: pointer; }
.tip-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tip-amt { flex: 1; min-width: 54px; padding: 10px 0; border: var(--bd) solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 6px; cursor: pointer; font-size: 14px; }
.tip-amt.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.tip-input { width: 100%; padding: 10px; border: var(--bd) solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 14px; box-sizing: border-box; margin-bottom: 10px; }
.tip-msg { width: 100%; min-height: 64px; padding: 10px; border: var(--bd) solid var(--line); background: var(--surface-2); color: var(--ink); font-family: var(--font-body); box-sizing: border-box; resize: vertical; }
.tip-balance { font-size: 12px; color: var(--ink-soft); margin: 8px 0; }

/* ---------- 消息中心 ---------- */
.msg-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.msg-side { background: var(--surface); border: var(--bd) solid var(--line); box-shadow: var(--sp) var(--sp) 0 var(--shadow); overflow: hidden; }
.msg-tabs { display: flex; border-bottom: var(--bd) solid var(--line); }
.msg-tab { flex: 1; padding: 12px; background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 13px; font-family: var(--font-body); }
.msg-tab.is-active { color: var(--primary); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary); }
.msg-tab .cnt { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: var(--accent); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 4px; }
.msg-list { max-height: 560px; overflow-y: auto; }
.msg-pane { display: none; padding: 8px; }
.msg-pane.is-active { display: block; }
.msg-list__head { padding: 6px 8px 10px; }
.msg-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; font-size: 13px; }
.notif-item { display: block; padding: 12px; border-bottom: 1px dashed var(--line); text-decoration: none; color: var(--ink); }
.notif-item.is-read { opacity: .62; }
.notif-item__title { font-size: 14px; font-weight: 600; }
.notif-item__content { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.notif-item__time { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.pm-thread { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.pm-thread:hover { background: var(--surface-2); }
.pm-thread__avatar svg { width: 40px; height: 40px; border-radius: 6px; }
.pm-thread__name { font-size: 14px; font-weight: 600; }
.pm-unread { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: var(--accent); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 4px; margin-left: 6px; }
.pm-thread__last { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.msg-main { background: var(--surface); border: var(--bd) solid var(--line); box-shadow: var(--sp) var(--sp) 0 var(--shadow); min-height: 480px; padding: 18px; }
.msg-main__empty { display: flex; align-items: center; justify-content: center; height: 440px; color: var(--ink-soft); font-size: 14px; }
.pm-chat__head { font-size: 14px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pm-chat__body { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.pm-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 30px 0; }
.pm-msg { display: flex; flex-direction: column; max-width: 75%; }
.pm-msg.mine { align-self: flex-end; align-items: flex-end; }
.pm-msg.theirs { align-self: flex-start; }
.pm-msg__bubble { padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); word-break: break-word; }
.pm-msg.mine .pm-msg__bubble { background: var(--primary); color: #fff; border-color: var(--primary); }
.pm-msg__time { font-size: 10px; color: var(--ink-soft); margin-top: 3px; }
.pm-chat__form { display: flex; gap: 8px; margin-top: 12px; }
.pm-chat__form input { flex: 1; padding: 10px; border: var(--bd) solid var(--line); background: var(--surface-2); color: var(--ink); font-family: var(--font-body); }
.pm-chat__form .btn { width: auto; margin: 0; }

/* ---------- 认证详情 ---------- */
.verify-detail { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.verify-detail div { font-size: 13px; color: var(--ink-soft); }
.verify-detail div span { display: inline-block; width: 72px; color: var(--ink); }
.pixel-form { max-width: 560px; }
.pixel-form .form-row { margin-bottom: 14px; }
.pixel-form label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ink-soft); }
.pixel-form input, .pixel-form textarea, .pixel-form select { width: 100%; padding: 10px 12px; border: var(--bd) solid var(--line); background: var(--surface-2); color: var(--ink); font-family: var(--font-body); font-size: 14px; box-sizing: border-box; outline: none; }
.pixel-form input:focus, .pixel-form textarea:focus, .pixel-form select:focus { border-color: var(--primary); }
.pixel-form textarea { min-height: 90px; resize: vertical; }
.hint { font-size: 12px; color: var(--ink-soft); margin: 8px 0; line-height: 1.6; }
.hint code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* ---------- Toast ---------- */
.px-toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px); background: #222; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transition: all .3s; z-index: 200; pointer-events: none; }
.px-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.px-toast.is-ok { background: #1a9c5b; }
.px-toast.is-err { background: #d23b3b; }

@media (max-width: 760px) {
  .msg-layout { grid-template-columns: 1fr; }
}