/* 用户系统 UI：互动栏 + 登录弹窗 + 个人主页。
   复用站点设计变量（--bg/--ink/--accent…），自动跟随深浅色。 */

/* ---- 顶栏登录入口 ---- */
.auth-slot { display: inline-flex; align-items: center; gap: .5rem; margin-left: .5rem; flex: none; white-space: nowrap; }
.auth-link {
  background: none; border: none; cursor: pointer; white-space: nowrap;
  font: inherit; color: var(--link); padding: .2rem .4rem; border-radius: var(--radius);
}
.auth-link:hover { color: var(--link-hover); text-decoration: underline; }
.auth-logout { color: var(--muted); }
.auth-name { display: inline-block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* ---- 互动栏 ---- */
.ix-wrap { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
.ix-bar { display: flex; gap: .5rem; flex-wrap: wrap; }
.ix-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--ink-soft);
  border-radius: 999px; padding: .3rem .8rem; cursor: pointer; font: inherit; font-size: .9rem;
  transition: background .15s, color .15s, border-color .15s;
}
.ix-btn:hover { border-color: var(--accent-soft); color: var(--ink); }
.ix-btn.on { color: var(--accent); border-color: var(--accent-soft); background: var(--bg-soft); }
.ix-ico { font-size: 1.05em; line-height: 1; }

.ix-panel { margin-top: .75rem; }
.ix-comments { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.ix-empty { color: var(--muted); font-size: .88rem; padding: .4rem 0; }
.ix-comment { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem; }
.ix-c-head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
.ix-c-name { color: var(--accent); font-weight: 600; }
.ix-c-time { font-size: .75rem; }
.ix-c-del { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .78rem; }
.ix-c-del:hover { color: #b3261e; }
.ix-c-body { color: var(--ink); font-size: .92rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

.ix-comment-form { display: flex; gap: .5rem; align-items: flex-end; }
.ix-comment-form textarea {
  flex: 1; resize: vertical; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .45rem .6rem;
}
.ix-comment-form textarea:focus { outline: none; border-color: var(--accent-soft); }
.ix-comment-form button {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  padding: .5rem .9rem; cursor: pointer; font: inherit; font-size: .9rem; white-space: nowrap;
}
.ix-comment-form button:hover { background: var(--accent-soft); }

/* ---- 登录/注册弹窗 ---- */
.auth-modal-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.auth-modal {
  position: relative; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-2); width: min(92vw, 360px); padding: 1.5rem;
  /* 注册说明展开后弹窗较高；矮屏（横屏手机等）内部滚动，不溢出视口 */
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.auth-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.auth-tab {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  padding: .5rem; cursor: pointer; font: inherit; font-size: 1rem; color: var(--muted);
}
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: .7rem; }
.auth-form input {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .7rem;
}
.auth-form input:focus { outline: none; border-color: var(--accent-soft); }
.auth-error { color: #b3261e; font-size: .85rem; }

/* ---- 注册说明 ---- */
.auth-guide {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .8rem;
  font-size: .8rem; line-height: 1.6; color: var(--muted);
}
.auth-guide-lead { margin: 0 0 .5rem; color: var(--ink); font-size: .82rem; }
.auth-guide-note { margin: .55rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--border); }
.auth-rules { margin: 0; padding: 0; list-style: none; }
.auth-rules li {
  position: relative; padding-left: 1.15rem; margin: .2rem 0;
  transition: color .15s;
}
.auth-rules li::before {
  content: '·'; position: absolute; left: .3rem; font-weight: 700;
}
.auth-rules li b { color: var(--ink); font-weight: 600; }
.auth-rules li.ok { color: var(--accent); }
.auth-rules li.ok::before { content: '✓'; left: .1rem; font-size: .85em; }
.auth-rules li.ok b { color: var(--accent); }
.auth-rules li.bad { color: var(--danger, #b3261e); }
.auth-rules li.bad::before { content: '✕'; left: .1rem; font-size: .8em; }
.auth-rules li.bad b { color: var(--danger, #b3261e); }
/* 深色主题下 #b3261e 太暗看不清，提亮 */
[data-theme=dark] .auth-rules li.bad,
[data-theme=dark] .auth-rules li.bad b,
[data-theme=dark] .auth-error { color: #f2836f; }
.auth-submit {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  padding: .6rem; cursor: pointer; font: inherit; font-size: .95rem; margin-top: .2rem;
}
.auth-submit:hover { background: var(--accent-soft); }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-close {
  position: absolute; top: .6rem; right: .6rem; background: none; border: none;
  cursor: pointer; color: var(--muted); font-size: 1rem;
}

/* ---- 划线 ---- */
mark.hl {
  background: rgba(200, 133, 14, .22);   /* accent-soft 淡染 */
  color: inherit; padding: 0 .02em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
mark.hl-mine { background: rgba(200, 133, 14, .38); }
[data-theme=dark] mark.hl { background: rgba(200, 133, 14, .30); }
[data-theme=dark] mark.hl-mine { background: rgba(200, 133, 14, .48); }

.hl-popover {
  position: absolute; z-index: 900; display: flex; gap: .25rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: .25rem; box-shadow: var(--shadow-2);
}
.hl-popover button {
  background: none; border: none; cursor: pointer; font: inherit; font-size: .82rem;
  color: var(--ink-soft); padding: .25rem .6rem; border-radius: 999px; white-space: nowrap;
}
.hl-popover button:hover { background: var(--bg-soft); color: var(--accent); }

/* ---- 个人主页 ---- */
.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }

/* 继续阅读书签卡 */
.pf-resume {
  display: block; text-decoration: none; margin-bottom: 1.5rem;
  background: var(--bg-soft); border: 1px solid var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: .8rem 1rem; transition: box-shadow .15s;
}
.pf-resume:hover { box-shadow: var(--shadow-2); }
.pf-resume-tag {
  display: inline-block; font-size: .72rem; color: #fff; background: var(--accent);
  border-radius: 999px; padding: .1rem .55rem; margin-bottom: .4rem;
}
.pf-resume-where { display: block; color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.pf-resume-preview {
  display: block; color: var(--muted); font-size: .88rem; font-family: var(--font-serif);
  line-height: 1.6; margin-top: .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-resume-go { display: block; color: var(--link); font-size: .82rem; margin-top: .45rem; }
.profile-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.profile-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .5rem .8rem; cursor: pointer; font: inherit; color: var(--muted); }
.profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.profile-list { display: flex; flex-direction: column; gap: .6rem; }
.profile-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; }
.profile-item a { color: var(--link); }
.pf-loc { font-size: .9rem; }
.pf-loc a { font-weight: 600; }
.pf-preview {
  margin-top: .3rem; color: var(--muted); font-size: .85rem; line-height: 1.6;
  font-family: var(--font-serif);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.profile-empty { color: var(--muted); padding: 1rem 0; }

/* ---- 管理后台 ---- */
.admin-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1.5rem;
}
.admin-stat {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem .5rem; text-align: center;
}
.admin-stat-n { display: block; font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.admin-stat-l { display: block; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.admin-hint, .admin-counts { font-size: .82rem; color: var(--muted); }
.admin-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .6rem; }
.admin-item-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.admin-item-main a { color: var(--link); }
.admin-counts { margin-top: .3rem; }
.admin-badge { font-size: .7rem; color: #fff; background: var(--accent); border-radius: 999px; padding: .05rem .5rem; }
.admin-rank { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: var(--bg-soft); border-radius: 50%; font-size: .8rem; font-weight: 700; color: var(--accent); }
.admin-del { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius); padding: .2rem .6rem; cursor: pointer; font: inherit; font-size: .8rem; }
.admin-del:hover { color: #fff; background: #b3261e; border-color: #b3261e; }

/* ============ 移动端适配（≤640px）============ */
@media (max-width: 640px) {
  /* 互动栏：更大点击区，按钮撑开更好按 */
  .ix-bar { gap: .4rem; }
  .ix-btn { padding: .5rem .9rem; font-size: .95rem; min-height: 40px; }

  /* 评论输入：竖排，输入框占满，发表键整行；字号≥16px 防 iOS 自动放大 */
  .ix-comment-form { flex-direction: column; align-items: stretch; }
  .ix-comment-form textarea { font-size: 16px; }
  .ix-comment-form button { width: 100%; padding: .6rem; min-height: 44px; }
  .ix-c-body { font-size: .95rem; }
  .ix-c-del { padding: .2rem .4rem; }  /* 删除键更易点 */

  /* 登录弹窗：贴边留白，输入字号≥16px 防缩放 */
  .auth-modal { width: calc(100vw - 24px); padding: 1.25rem; }
  .auth-form input { font-size: 16px; padding: .7rem; }
  /* 注册说明让弹窗变高，小屏上给它自己滚动，别顶出视口 */
  .auth-guide { font-size: .82rem; }
  .auth-submit { padding: .75rem; min-height: 44px; }
  .auth-tab { padding: .6rem; min-height: 44px; }
  .auth-close { top: .4rem; right: .4rem; padding: .4rem; font-size: 1.2rem; }

  /* 划线浮钮：触摸友好的更大按钮 */
  .hl-popover button { padding: .5rem .9rem; font-size: .95rem; min-height: 40px; }

  /* 顶栏登录入口：手机上极度收敛，避免把品牌名/字号钮挤到折行 */
  .auth-slot { margin-left: .15rem; gap: .15rem; }
  .auth-link { padding: .3rem .25rem; font-size: .82rem; }
  .auth-name { max-width: 4.5rem; }           /* 昵称截断，不占大片横向空间 */
  /* “退出”文字换成紧凑图标 ⎋，省地方且仍可点 */
  .auth-logout { font-size: 0; padding: .3rem; min-width: 30px; }
  .auth-logout::before { content: "⎋"; font-size: 1.1rem; line-height: 1; }
  /* 品牌名绝不折行；工具区可收缩以让出空间 */
  .top .brand { white-space: nowrap; flex: none; }
  .top .top-tools { flex-shrink: 1; min-width: 0; }
  /* 未登录时“登录/注册”也收敛 */
  #auth-open { font-size: .82rem; padding: .3rem .3rem; }

  /* 个人主页 tab：横向可滚动，不再换行挤压 */
  .profile-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: .2rem; scrollbar-width: none;
  }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-tab { white-space: nowrap; padding: .5rem .7rem; min-height: 44px; flex: 0 0 auto; }
  .pf-resume-preview { white-space: normal; }  /* 手机上允许换行看全预览 */

  /* 管理后台：概况卡 4列→2列，删除键更好点 */
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-stat-n { font-size: 1.3rem; }
  .admin-del { padding: .35rem .7rem; min-height: 36px; }
}