/*! XWP 应用页通用外壳 · 顶栏 / 卡片 / 按钮 / 评论
 *  统一为「暗黑紫金」品牌风（与首页 style.css 同源）：
 *  深底 #121026、抬升卡片 #15112F、品牌金 #E7C889 强调、紫 #7C8CFF 次级。
 *  长文阅读区用抬升深色卡片保证可读性；主按钮与首页 .btn-gold 同源（金渐变+白字+全圆角）。
 */
body{
  background:linear-gradient(180deg,#1a1520,#121026);
  background-attachment:fixed;
  color:var(--xwp-ink);
}
.xwp-topbar{
  position:sticky; top:0; z-index:40; height:52px; display:flex; align-items:center;
  gap:10px; padding:0 14px; background:rgba(11,10,28,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--xwp-line);
}
.xwp-topbar .brand{ font-weight:700; font-size:16px; color:var(--xwp-ink); display:flex; align-items:center; gap:7px; }
.xwp-topbar .brand .dot{ width:9px; height:9px; border-radius:3px; background:var(--xwp-gold); }
.xwp-topbar .spacer{ flex:1; }
.xwp-page{ max-width:760px; margin:0 auto; padding:14px 14px 92px; }
.xwp-page.narrow{ max-width:680px; }

.xwp-h1{ font-size:20px; font-weight:700; margin:6px 2px 14px; color:var(--xwp-ink); }
.xwp-muted{ color:var(--xwp-ink2); }
.xwp-center{ text-align:center; }

/* 按钮 —— 与首页 .btn-gold 同源：金渐变 + 白字 + 全圆角 */
.xwp-btn{ border:1px solid var(--xwp-line); background:var(--xwp-surface); color:var(--xwp-ink); border-radius:999px;
  padding:9px 18px; font-size:14px; cursor:pointer; transition:.15s; }
.xwp-btn:hover{ border-color:var(--xwp-purple); color:#fff; }
.xwp-btn.primary{ background:linear-gradient(135deg,var(--xwp-gold-400),var(--xwp-gold-600) 55%,var(--xwp-gold-800)); border-color:transparent; color:#fff; font-weight:600; }
.xwp-btn.primary:hover{ filter:brightness(1.06); color:#fff; }
.xwp-btn:disabled{ opacity:.55; cursor:default; }
.xwp-btn.sm{ padding:6px 14px; font-size:13px; }

/* 卡片 */
.xwp-card{ background:var(--xwp-surface); border:1px solid var(--xwp-line); border-radius:14px; padding:14px; box-shadow:0 2px 14px rgba(0,0,0,.35); }

/* 文章卡片流（当前主流「封面大图 + 标题 + 摘要 + 作者」卡片式） */
.art-card{ display:flex; flex-direction:column; background:var(--xwp-surface); border:1px solid var(--xwp-line);
  border-radius:16px; overflow:hidden; margin-bottom:14px; box-shadow:0 2px 14px rgba(0,0,0,.35);
  cursor:pointer; transition:.16s; text-decoration:none; color:inherit; }
.art-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.5); border-color:var(--xwp-line-strong); }
.art-card:active{ transform:scale(.985); }
.art-cover{ width:100%; height:172px; background:linear-gradient(135deg,#2a2350,#3a2f6e); overflow:hidden; }
.art-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-cover-ph{ position:relative; }
.art-cover-ph::after{ content:"XWP"; position:absolute; right:14px; bottom:10px; font-weight:800; font-size:22px;
  letter-spacing:2px; color:rgba(231,200,137,.55); }
.art-card-body{ padding:13px 14px 14px; }
.art-card h3{ font-size:16.5px; margin:0 0 7px; line-height:1.45; color:var(--xwp-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-card .summary{ color:var(--xwp-ink2); font-size:13.5px; line-height:1.6; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-card .summary.art-summary-ph{ opacity:.55; font-style:italic; }
.art-card .meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--xwp-ink2); }
.art-card .meta .nick{ color:var(--xwp-ink); font-weight:600; }
.art-card .meta .sp{ flex:1; }
.art-owner-bar{ display:flex; gap:8px; margin:0 0 14px; }

/* 文章详情（公众号式居中阅读栏，深色抬升卡片） */
.art-detail .title{ font-size:23px; font-weight:700; line-height:1.4; margin:4px 0 12px; color:var(--xwp-ink); }
.art-detail .meta{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--xwp-ink2); margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--xwp-line); }
.art-detail .meta .nick{ color:var(--xwp-ink); font-weight:600; }
.art-body{ font-size:16.5px; line-height:1.85; color:#CFCBE8; word-break:break-word; overflow-wrap:anywhere; }
.art-body h1{ font-size:22px; margin:26px 0 12px; color:var(--xwp-ink); }
.art-body h2{ font-size:19px; margin:22px 0 10px; color:var(--xwp-ink); }
.art-body h3{ font-size:17px; margin:18px 0 8px; color:var(--xwp-ink); }
.art-body p{ margin:0 0 14px; }
.art-body blockquote{ margin:0 0 14px; padding:8px 14px; background:rgba(124,140,255,.08); border-left:3px solid var(--xwp-gold);
  color:var(--xwp-ink2); border-radius:0 8px 8px 0; }
.art-body ul{ margin:0 0 14px; padding-left:22px; }
.art-body a{ color:var(--xwp-gold); word-break:break-all; }
.art-body img{ max-width:100%; border-radius:10px; }
/* 富文本里可能带出的宽元素：长代码块 / 宽表格 / 长链接串 —— 全部限宽 + 容器内横向滚动，
   杜绝「页面被撑宽左右摆动/变大溢出」 */
.art-body pre{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--xwp-surface-2);
  border:1px solid var(--xwp-line); border-radius:10px; padding:12px 14px; margin:0 0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; line-height:1.7; color:#CFCBE8; }
.art-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.art-body table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-collapse:collapse; margin:0 0 14px; font-size:14px; }
.art-body table th,.art-body table td{ border:1px solid var(--xwp-line); padding:7px 10px; white-space:nowrap; }
.art-body iframe,.art-body video{ max-width:100%; }

/* 点赞条（心形保留语义红） */
.like-bar{ display:flex; justify-content:center; margin:26px 0 8px; }
.like-btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--xwp-line); background:var(--xwp-surface);
  border-radius:999px; padding:9px 20px; font-size:14.5px; cursor:pointer; color:var(--xwp-ink2); transition:.15s; }
.like-btn .heart{ width:18px; height:18px; }
.like-btn.on{ color:var(--xwp-red); border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.1); }
.like-btn.on .heart{ fill:var(--xwp-red); stroke:var(--xwp-red); }

/* 评论 */
.cmt-block{ margin-top:24px; }
.cmt-block h4{ font-size:15px; margin:0 0 12px; color:var(--xwp-ink); }
.cmt-item{ display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--xwp-line); }
.cmt-item .xwp-avatar{ width:34px; height:34px; }
.cmt-item .c-main{ flex:1; min-width:0; }
.cmt-item .c-nick{ font-size:13.5px; font-weight:600; color:var(--xwp-ink); }
.cmt-item .c-time{ font-size:11.5px; color:var(--xwp-ink2); margin-left:8px; }
.cmt-item .c-text{ font-size:14.5px; color:#CFCBE8; line-height:1.65; margin-top:3px; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.composer{ display:flex; gap:8px; margin:12px 0; }
.composer textarea, .xwp-textarea{ flex:1; border:1px solid var(--xwp-line); border-radius:11px; padding:10px 12px;
  font-size:14.5px; resize:vertical; min-height:44px; outline:none; font-family:inherit; background:var(--xwp-surface-2); color:var(--xwp-ink); }
.composer textarea:focus, .xwp-textarea:focus{ border-color:var(--xwp-gold); background:var(--xwp-surface); }

/* 表情选择器（评论输入框）—— 零依赖纯 CSS/JS */
.cmt-editor{ position:relative; flex:1; min-width:0; }
.cmt-editor textarea{ width:100%; box-sizing:border-box; padding-right:42px; }
.cmt-emoji-btn{ position:absolute; right:8px; bottom:8px; width:28px; height:28px; padding:0;
  border:0; background:none; font-size:19px; line-height:1; cursor:pointer; opacity:.75;
  -webkit-tap-highlight-color:transparent; transition:opacity .15s, transform .15s; }
.cmt-emoji-btn:hover{ opacity:1; }
.cmt-emoji-btn:active{ transform:scale(.85); }
.cmt-emoji-panel{ position:absolute; right:0; bottom:calc(100% + 6px); z-index:60;
  display:none; grid-template-columns:repeat(8, 1fr); gap:4px; width:296px; max-width:78vw;
  padding:10px; background:#1B1838; border:1px solid rgba(124,140,255,.28); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); }
.cmt-emoji-panel.open{ display:grid; }
.cmt-emoji-panel button{ border:0; background:none; font-size:20px; line-height:1.25; padding:5px 2px;
  border-radius:8px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .12s; }
.cmt-emoji-panel button:hover{ background:rgba(124,140,255,.18); }
.cmt-emoji-panel button:active{ transform:scale(.85); }
.cmt-emoji-tip{ grid-column:1 / -1; font-size:11px; color:var(--xwp-ink2); text-align:center;
  padding-top:6px; margin-top:2px; border-top:1px solid rgba(124,140,255,.14); }

/* 评论回复（楼中楼） */
.cmt-reply-btn{ display:inline-block; margin-left:8px; padding:2px 9px; font-size:11.5px; line-height:1.5;
  color:var(--xwp-ink2); background:none; border:1px solid var(--xwp-line); border-radius:10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:.15s; vertical-align:1px; }
.cmt-reply-btn:hover{ color:var(--xwp-purple); border-color:var(--xwp-purple); }
.cmt-reply-btn.on{ color:#fff; background:var(--xwp-purple); border-color:var(--xwp-purple); }
.cmt-item.cmt-reply{ margin-left:46px; padding-left:12px; border-left:2px solid var(--xwp-line-strong);
  border-top:0; padding-top:7px; padding-bottom:7px; }
.cmt-at{ color:var(--xwp-purple); font-weight:600; }

/* 社区 */
.cat-pills{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; }
.cat-pills button{ border:1px solid var(--xwp-line); background:var(--xwp-surface); border-radius:999px; padding:7px 15px;
  font-size:13.5px; color:var(--xwp-ink2); cursor:pointer; white-space:nowrap; transition:.15s; }
.cat-pills button.on{ background:linear-gradient(135deg,var(--xwp-gold-400),var(--xwp-gold-600) 55%,var(--xwp-gold-800)); border-color:transparent; color:#fff; font-weight:600; }
.thread-card{ display:block; background:var(--xwp-surface); border:1px solid var(--xwp-line); border-radius:14px; padding:14px; margin-bottom:11px;
  box-shadow:0 2px 14px rgba(0,0,0,.35); cursor:pointer; text-decoration:none; color:inherit; transition:.16s; }
.thread-card:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.5); border-color:var(--xwp-line-strong); }
.thread-card:active{ transform:scale(.985); border-color:var(--xwp-line-strong); }
.thread-card h3{ font-size:16px; margin:0 0 6px; line-height:1.45; color:var(--xwp-ink); }
.thread-card .ex{ color:var(--xwp-ink2); font-size:13px; line-height:1.55; margin:0 0 9px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.thread-card .meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--xwp-ink2); }
.thread-card .meta .sp{ flex:1; }
.reply-item{ display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--xwp-line); }
.reply-item .xwp-avatar{ width:32px; height:32px; }
.reply-item .r-main{ flex:1; }
.reply-item .r-nick{ font-weight:600; font-size:13.5px; color:var(--xwp-ink); }
.reply-item .r-text{ font-size:14.5px; color:#CFCBE8; line-height:1.6; margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.reply-item .r-act{ font-size:12px; color:var(--xwp-ink2); margin-top:4px; display:flex; gap:14px; align-items:center; }
.reply-item .r-like.on{ color:var(--xwp-red); }
.xwp-row{ display:flex; gap:10px; align-items:center; }
.xwp-row.between{ justify-content:space-between; }
.xwp-row.wrap{ flex-wrap:wrap; }

/* 空态 / 加载 */
.xwp-empty{ text-align:center; color:var(--xwp-ink2); padding:40px 0; font-size:14px; }
.xwp-loading{ text-align:center; color:var(--xwp-ink2); padding:24px 0; font-size:13px; }
.xwp-err-box{ color:var(--xwp-red); font-size:13px; padding:10px 0; }

/* 编辑器 */
.ed-cover-prev{ width:100%; height:150px; object-fit:cover; border-radius:10px; margin-top:8px; display:none; background:var(--xwp-surface-2); }
.ed-tip{ font-size:12px; color:var(--xwp-ink2); margin-top:4px; }

/* 我的主页 */
.me-head{ display:flex; gap:14px; align-items:center; padding:8px 2px 18px; }
.me-head .xwp-avatar{ width:60px; height:60px; font-size:24px; }
.me-head .name{ font-size:19px; font-weight:700; color:var(--xwp-ink); }
.me-head .sub{ font-size:13px; color:var(--xwp-ink2); margin-top:3px; }
.me-stat{ display:flex; gap:0; text-align:center; margin:6px 0 16px; border:1px solid var(--xwp-line); border-radius:12px; overflow:hidden; background:var(--xwp-surface); }
.me-stat div{ flex:1; padding:11px 4px; }
.me-stat div + div{ border-left:1px solid var(--xwp-line); }
.me-stat b{ display:block; font-size:17px; color:var(--xwp-ink); }
.me-stat span{ font-size:12px; color:var(--xwp-ink2); }
.me-tabs{ display:flex; gap:6px; margin-bottom:12px; border-bottom:1px solid var(--xwp-line); }
.me-tabs button{ border:0; background:none; padding:10px 4px; font-size:14px; color:var(--xwp-ink2); cursor:pointer; position:relative; }
.me-tabs button.on{ color:var(--xwp-gold); font-weight:600; }
.me-tabs button.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--xwp-gold); }
.self-badge{ font-size:11px; color:var(--xwp-gold); background:rgba(231,200,137,.12); border-radius:5px; padding:1px 6px; margin-left:6px; }

/* ============================================================
   PC 端文章页布局（掘金风）
   ≥1024px：两栏（正文 + 右侧栏），收起手机底部标签栏，顶部补导航
   ≥1200px：三栏（左悬浮操作 + 正文 + 右侧栏）
   <1024px：完全不受影响，仍是原来的单栏 + 底部标签栏
   ============================================================ */
.art-layout{ position:relative; }
.art-rail{ display:none; }
.art-side{ display:none; }
.art-topnav{ display:none; }

@media (min-width: 1024px){
  body.page-article{ padding-bottom:0 !important; }
  body.page-article .xwp-tabbar{ display:none !important; }

  .art-topnav{ display:flex; align-items:center; gap:22px; margin-left:28px; }
  .art-topnav a{
    font-size:14px; color:#9C97C8; text-decoration:none;
    padding:5px 1px; border-bottom:2px solid transparent;
    transition:color .2s, border-color .2s;
  }
  .art-topnav a:hover{ color:var(--xwp-ink); }
  .art-topnav a.on{ color:var(--xwp-gold); border-bottom-color:var(--xwp-gold); }

  .art-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:24px;
    max-width:1080px;
    margin:0 auto;
    padding:24px 20px 60px;
    align-items:start;
  }
  .xwp-page.art-main{ max-width:none; margin:0; padding:0; }
  /* 目录锚点跳转时避开 sticky 顶栏，别把标题顶到栏下面 */
  .art-body h2, .art-body h3{ scroll-margin-top:76px; }

  .art-side{
    display:block; position:sticky; top:76px;
    max-height:calc(100vh - 108px); overflow-y:auto; scrollbar-width:thin;
  }
  .side-card{
    background:var(--xwp-surface); border:1px solid var(--xwp-line);
    border-radius:12px; padding:14px; margin-bottom:14px;
  }
  .side-title{
    font-size:13px; font-weight:600; color:var(--xwp-ink);
    margin:0 0 10px; display:flex; align-items:center; gap:7px;
  }
  .side-title::before{
    content:""; width:3px; height:12px; border-radius:2px;
    background:var(--xwp-gold); flex:none;
  }

  .toc-item{
    display:block; font-size:13px; color:#9C97C8; text-decoration:none;
    padding:5px 9px; line-height:1.55; border-left:2px solid transparent;
    transition:color .18s, background .18s;
  }
  .toc-item:hover{ color:var(--xwp-ink); }
  .toc-item.h3{ padding-left:22px; font-size:12.5px; }
  .toc-item.on{
    color:var(--xwp-gold); border-left-color:var(--xwp-gold);
    background:rgba(231,200,137,.08);
  }

  .side-author{ display:flex; align-items:center; gap:11px; }
  .side-author .xwp-avatar{ width:42px; height:42px; font-size:17px; flex:none; }
  .side-author .an{ font-size:14px; font-weight:600; color:var(--xwp-ink); }
  .side-author .ad{ font-size:12px; color:#8E8AC4; margin-top:3px; }

  .side-rel{ display:block; padding:9px 0; border-top:1px solid var(--xwp-line); text-decoration:none; }
  .side-rel:first-child{ border-top:0; padding-top:2px; }
  .side-rel .rt{
    font-size:13px; color:#CFCBE8; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .side-rel:hover .rt{ color:var(--xwp-gold); }
  .side-rel .rm{ font-size:11px; color:#8E8AC4; margin-top:4px; }
  .side-empty{ font-size:12px; color:#8E8AC4; }
}

@media (min-width: 1200px){
  .art-layout{
    grid-template-columns:60px minmax(0,1fr) 296px;
    gap:26px; max-width:1180px;
  }
  .art-rail{
    display:flex; flex-direction:column; align-items:center; gap:9px;
    position:sticky; top:76px;
  }
  .rail-btn{
    width:48px; height:48px; border-radius:50%;
    border:1px solid var(--xwp-line); background:var(--xwp-surface);
    color:#9C97C8; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    transition:color .2s, border-color .2s, background .2s;
  }
  .rail-btn svg{
    width:19px; height:19px; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
  .rail-btn span{ font-size:10px; line-height:1; }
  .rail-btn:hover{ color:var(--xwp-gold); border-color:var(--xwp-gold); }
  .rail-btn.on{
    color:var(--xwp-gold); border-color:var(--xwp-gold);
    background:rgba(231,200,137,.1);
  }
}