/* 江湖帖 · 多端适配：平板 768-1023 / PC >=1024 */

/* ── PC 专属元素：移动端默认隐藏 ── */
.pc-side{display:none}
.pc-brand{display:none}
.pc-user{display:none}
.pc-nav-spacer{display:none}
.pc-back-nav{display:none}
.pc-actions{display:none}
.pc-brand,.pc-user,.pc-nav-spacer,.pc-back-nav,.pc-actions{flex-shrink:0}

/* ── 平板 768–1023：单列加宽，居中限宽 ── */
@media(min-width:768px) and (max-width:1023px){
  html,body{background:#e6e0d4}
  .phone{max-width:720px;margin:0 auto;box-shadow:0 0 0 1px var(--border),0 10px 40px rgba(60,40,20,.12)}
}

/* ── PC ≥1024：顶部导航 + 左栏 248 + 主区自适应 + 右栏 304 ── */
@media(min-width:1024px){
  html,body{background:#e6e0d4}
  body{align-items:stretch}
  .phone{
    display:grid;
    max-width:1320px;
    grid-template-columns:248px minmax(0,1fr) 304px;
    grid-template-rows:60px minmax(0,1fr);
    grid-template-areas:"nav nav nav" "left main right";
    box-shadow:0 0 0 1px var(--border),0 14px 56px rgba(60,40,20,.16);
  }

  /* 移动专属元素在 PC 强制隐藏：JS 会用内联样式改 display，必须 !important */
  .statusbar{display:none !important}
  .header{display:none !important}
  /* 顶部导航常驻：登录页/聊天页的隐藏逻辑只针对移动端 */
  .tabbar{display:flex !important}

  /* ── 底部 tabbar ⟶ 顶部横向主导航 ── */
  .tabbar{
    grid-area:nav;height:60px;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:2px;padding:0 18px;
    border-top:none;border-bottom:1px solid var(--border);background:var(--card);
    box-shadow:0 1px 3px rgba(60,40,20,.05);
  }
  .tabbar .tab{flex:0 0 auto;flex-direction:row;gap:7px;padding:9px 15px;border-radius:10px;height:auto}
  .tabbar .tab:hover{background:rgba(200,169,81,.09);color:var(--gold-d)}
  .tabbar .tab.active{background:rgba(200,169,81,.15)}
  .tabbar .tab .icon{width:17px;height:17px;margin:0}
  .tabbar .tab .label{font-size:13.5px}
  .tabbar .tab .tab-badge{position:static;margin:0;border:none;height:15px;min-width:15px;font-size:9px}

  .pc-brand{display:flex;align-items:center;gap:9px;padding-right:16px;margin-right:10px;
    border-right:1px solid var(--border);cursor:pointer;transition:.15s}
  .pc-brand:hover{opacity:.8}
  /* 品牌位两行：主标题 + 首页标语（原正文 hero 整块搬上来） */
  .pc-brand .pbt{display:flex;flex-direction:column;justify-content:center;line-height:1.16}
  .pc-brand .pbt-main{font-family:var(--serif);font-size:16px;font-weight:600;
    color:var(--ink);letter-spacing:2px}
  .pc-brand .pbt-tag{font-size:10px;font-weight:400;color:var(--ink3);
    letter-spacing:.4px;margin-top:1px;white-space:nowrap}
  .pc-brand .logo{width:30px;height:30px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#c8a951,#9a7e2e);color:#fff;font-size:15px;
    display:flex;align-items:center;justify-content:center;letter-spacing:0}
  .pc-nav-spacer{display:block;flex:1}

  /* ── 顶部导航右侧的「动作区」 ──
     分工铁律：导航区放「页面」（今日江湖 / 消息 / 许愿墙 / 我的），
              动作区放「动作」（张榜求助 = 发布）。
     故 PC 上隐藏 create tab —— 它和右侧的「张榜求助」按钮目的地完全相同
     （都走 navigate('create')），留着就是两个入口干同一件事。
     移动 / 平板没有动作区，底部 tab 是这两个功能的唯一入口（见文件末尾）。 */
  .tabbar .tab[data-page="create"]{display:none}

  .pc-actions{display:flex;align-items:center;gap:8px;margin-right:12px}
  .pc-act{height:36px;padding:0 18px;border-radius:18px;font-size:13.5px;cursor:pointer;
    font-family:var(--sans);display:flex;align-items:center;gap:7px;line-height:1;
    transition:transform .16s,box-shadow .16s;white-space:nowrap}
  .pc-act .ico{width:15px;height:15px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center}
  .pc-act .ico svg{width:15px;height:15px;display:block}
  .pc-act:active{transform:scale(.97)}

  /* 主操作：金色渐变实心 */
  .pc-act.primary{border:none;color:#fff;font-weight:600;letter-spacing:1px;
    background:linear-gradient(135deg,#c8a951,#9a7e2e);box-shadow:0 3px 10px rgba(154,126,46,.28)}
  .pc-act.primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(154,126,46,.34)}

  .pc-user{display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 10px;
    border-radius:10px;transition:.15s}
  .pc-user:hover{background:rgba(200,169,81,.1)}
  .pc-user .av{width:30px;height:30px;border-radius:50%;flex-shrink:0;font-size:12px;
    background:linear-gradient(135deg,#e8d59a,#c8a951);color:#fff;font-weight:600;
    display:flex;align-items:center;justify-content:center}
  .pc-user .nm{font-size:13px;color:var(--ink2);max-width:96px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}

  .pc-back-nav{align-items:center;gap:6px;padding:7px 14px;margin-right:10px;
    border:1px solid var(--border);border-radius:9px;color:var(--ink2);font-size:13px;
    cursor:pointer;transition:.15s}
  .pc-back-nav:hover{border-color:var(--gold);color:var(--gold-d);background:rgba(200,169,81,.08)}
  .pc-back-nav.show{display:flex}

  /* ── 主内容区 ── */
  #pages{grid-area:main;overflow-y:auto;background:var(--bg);padding-top:10px}
  /* 主区的分类区块由左栏导航接管，PC 上隐藏避免重复 */
  #page-home .cat-card{display:none}
  /* 首个导航项在 PC 显示为「首页」，避免与品牌「江湖帖」重复 */
  .tabbar .tab[data-page="home"] .label{font-size:0}
  .tabbar .tab[data-page="home"] .label::after{content:"首页";font-size:13.5px}

  /* ── 左右侧栏 ── */
  .pc-side{display:block;overflow-y:auto;overflow-x:hidden;background:var(--card);
    padding:16px 14px 40px;font-size:13px}
  .pc-side-left{grid-area:left;border-right:1px solid var(--border)}
  .pc-side-right{grid-area:right;border-left:1px solid var(--border)}

  .pc-card{background:var(--card);border:0.5px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:12px}
  .pc-side .pc-card:last-child{margin-bottom:0}
  .pc-card-title{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-size:13px;
    font-weight:600;color:var(--ink);margin-bottom:10px;padding-bottom:8px;
    border-bottom:0.5px solid var(--border)}
  .pc-card-title .ico{font-size:14px;line-height:1}
  .pc-card-title .more{margin-left:auto;font-size:11px;font-weight:400;color:var(--ink3);cursor:pointer}
  .pc-card-title .more:hover{color:var(--gold-d)}

  /* 「张榜求助」入口只有顶部导航右侧一个（见 .pc-actions），本栏只留分类与快捷入口 */
  .pc-nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
    color:var(--ink2);cursor:pointer;transition:.15s}
  .pc-nav-item:hover{background:rgba(200,169,81,.1);color:var(--gold-d)}
  .pc-nav-item.active{background:rgba(200,169,81,.16);color:var(--gold-d);font-weight:600}
  .pc-nav-item .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}
  .pc-nav-item .cnt{margin-left:auto;font-size:11px;color:var(--ink3);flex-shrink:0}

  /* 原 .pc-rank-*（添香榜）与 .pc-knight（江湖名宿）样式已于 2026-09-10 第 5 轮
     随两张卡片一起删除，勿再凭旧记忆找回 */

  .pc-ann{display:flex;gap:6px;padding:6px 0;font-size:12px;color:var(--ink2);
    line-height:1.6;cursor:pointer}
  .pc-ann+.pc-ann{border-top:0.5px dashed var(--border)}
  .pc-ann .t{flex-shrink:0;font-size:11px;color:var(--ink3)}
  .pc-ann:hover{color:var(--gold-d)}

  .pc-stat-row{display:flex;gap:8px}
  .pc-stat{flex:1;min-width:0;text-align:center;padding:8px 4px;background:var(--bg);border-radius:8px}
  .pc-stat .n{display:block;font-family:var(--serif);font-size:16px;font-weight:700;color:var(--gold-d)}
  .pc-stat .l{font-size:10px;color:var(--ink3)}

  .pc-empty{padding:12px 0;text-align:center;font-size:12px;color:var(--ink3)}

  /* ── 许愿墙：PC 上给足高度，画布随主区变宽 ── */
  .river-stage{height:calc(100dvh - 60px - 190px);min-height:520px}

  /* ── 弹层：PC 上居中卡片，替代底部抽屉 ── */
  .modal-mask{align-items:center;padding:24px}
  .modal{max-width:460px;border-radius:16px;padding:26px 26px 28px;max-height:80%;
    animation:pcModalIn .22s ease-out}
  .wish-lightbox{padding:40px}
  /* 许愿详情评论条：PC 上导航在顶部，输入条贴底 */
  .wd-input-bar{bottom:0}

  #pages::-webkit-scrollbar,.pc-side::-webkit-scrollbar{width:8px}
  #pages::-webkit-scrollbar-thumb,.pc-side::-webkit-scrollbar-thumb{
    background:rgba(138,126,108,.32);border-radius:4px}
  #pages::-webkit-scrollbar-thumb:hover,.pc-side::-webkit-scrollbar-thumb:hover{
    background:rgba(138,126,108,.55)}
  #pages::-webkit-scrollbar-track,.pc-side::-webkit-scrollbar-track{background:transparent}
}

@keyframes pcModalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   移动 / 平板（<1024）：底部 tab 承担 PC 动作区的职责
   ──────────────────────────────────────────────────────────────────────────
   PC 上「张榜求助」是导航右侧的金色主按钮（发布＝主动作）；这两端没有动作区，
   由底部 tab 承担，所以「张榜」在这一端的地位＝PC 的金色主按钮：
   给它金色圆底，让主操作在 5 个 tab 里有视觉权重，其余 tab 保持安静。
   （该 tab 在 PC 被隐藏，见 ≥1024 段，本段只作用于 <1024。） */
@media(max-width:1023px){
  .tabbar .tab[data-page="create"] .icon{
    width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:50%;
    margin-bottom:2px;color:#fff;
    background:linear-gradient(135deg,#c8a951,#9a7e2e);
    box-shadow:0 2px 8px rgba(154,126,46,.34)}
  .tabbar .tab[data-page="create"] .label{color:var(--gold-d);font-weight:600}
}