/* wd-mobile.css · WARDOGS.VIP 手机端共享组件库（v1 · 2026-10-21）
 * 断点体系：≤767 手机 / 768-1023 平板 / 1024-1439 笔记本 / ≥1440 桌面
 * 设计语言沿用各页 :root 变量（--panel/--border/--accent…，带兜底值）。
 * 本文件只新增移动组件样式，不改写页面既有规则。
 */

/* ── 通用触控反馈 ── */
@media (hover:none){
  .wd-tap:active,.gbtn:active,.cbtn:active,.util:active,.langbtn:active{transform:scale(.97);filter:brightness(1.12)}
}

/* ═══ 底部 Tab Bar（≤1023px 显示，桌面完全隐藏） ═══ */
.wd-tabbar{display:none}
@media (max-width:1023px){
  .wd-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;height:calc(56px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    display:flex;align-items:stretch;
    background:var(--chrome,#1b1c19);border-top:1px solid var(--border,#55564e);
  }
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .wd-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:44px;color:var(--dim,#8c8e83);font-family:var(--cond,'Barlow Condensed','PingFang SC',sans-serif);
    font-size:11.5px;letter-spacing:.08em;cursor:pointer;background:none;border:0;padding:0}
  .wd-tab svg{width:21px;height:21px;flex:none}
  .wd-tab[aria-current="page"]{color:var(--accent,#d9ad32)}
  .wd-tab[aria-current="page"] .wd-tab-ic{fill:none;stroke:var(--accent,#d9ad32)}
}

/* ═══ 底部抽屉 Bottom Sheet（§4.4） ═══ */
.wd-sheet{position:fixed;inset:0;z-index:120;display:none}
.wd-sheet.open{display:block}
.wd-sheet-bd{position:absolute;inset:0;background:rgba(8,8,6,.62)}
.wd-sheet-pn{
  position:absolute;left:0;right:0;bottom:0;
  max-height:min(85svh,88vh);overflow:auto;overscroll-behavior:contain;
  background:var(--panel,#141513);border-top:1px solid var(--accent,#d9ad32);
  padding:0 0 calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform 220ms cubic-bezier(.22,.61,.36,1);
}
.wd-sheet.open .wd-sheet-pn{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.wd-sheet-pn{transition:none}}
.wd-sheet-grip{width:44px;height:4px;border-radius:2px;background:var(--border-strong,#a8a89a);opacity:.55;margin:10px auto 0}
.wd-sheet-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 10px;border-bottom:1px solid var(--border,#55564e)}
.wd-sheet-hd b{font-family:var(--cond,'Barlow Condensed','PingFang SC',sans-serif);font-weight:600;font-size:17px;letter-spacing:.08em;color:var(--text,#f2f1e8)}
.wd-sheet-x{width:44px;height:44px;margin-right:-8px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted,#b8b9ad);cursor:pointer}
.wd-sheet-x svg{width:20px;height:20px}
.wd-sheet-ft{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 16px;background:var(--panel,#141513);border-top:1px solid var(--border,#55564e)}
.wd-sheet-ft .wd-btn{flex:1;min-height:44px}
/* 面板内容：导航列表（Tab Bar 社区/工具面板共用） */
.wd-nlist{padding:4px 8px}
.wd-nlist i{display:block;font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim,#8c8e83);padding:14px 10px 4px}
.wd-nlist a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:10px;font-size:15px;color:var(--text,#f2f1e8);border-radius:0}
.wd-nlist a:active{background:var(--accent-wash,rgba(188,140,22,.30))}
.wd-nlist a .wd-ext{font-size:11px;color:var(--dim,#8c8e83)}

/* ═══ 查询类组件（§4.2-4.8，配 wd-query.js 使用） ═══ */
.wd-search{display:flex;align-items:center;min-height:44px;border:1px solid var(--border,#55564e);background:var(--panel-soft,rgba(42,43,39,.76))}
.wd-search svg{width:18px;height:18px;margin:0 10px;color:var(--dim,#8c8e83);flex:none}
.wd-search input{flex:1;min-width:0;height:44px;background:none;border:0;outline:none;color:var(--text,#f2f1e8);font-size:16px;font-family:var(--body,'Barlow','PingFang SC',sans-serif)}
.wd-search input::placeholder{color:var(--dim,#8c8e83)}
.wd-search .wd-clear{width:44px;height:44px;flex:none;display:none;align-items:center;justify-content:center;background:none;border:0;color:var(--muted,#b8b9ad);cursor:pointer}
.wd-search.has-val .wd-clear{display:flex}
.wd-search .wd-clear svg{margin:0;width:16px;height:16px}

.wd-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.wd-chips::-webkit-scrollbar{display:none}
.wd-chip{position:relative;flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--border,#55564e);background:var(--panel-soft,rgba(42,43,39,.76));color:var(--muted,#b8b9ad);font-size:13.5px;white-space:nowrap;cursor:pointer}
.wd-chip::after{content:"";position:absolute;inset:-4px}/* 44px 热区 */
.wd-chip[aria-pressed="true"],.wd-chip.on{border-color:var(--accent,#d9ad32);background:var(--accent-wash,rgba(188,140,22,.30));color:var(--text,#f2f1e8)}
.wd-chip[aria-disabled="true"]{opacity:.4;pointer-events:none}
.wd-chip .wd-badge{margin-left:6px;min-width:17px;height:17px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent,#d9ad32);color:#141513;font-size:11px;font-weight:600;border-radius:9px}
.wd-chips-mask{position:relative}
.wd-chips-mask::before,.wd-chips-mask::after{content:"";position:absolute;top:0;bottom:0;width:12px;pointer-events:none;z-index:1}
.wd-chips-mask::before{left:0;background:linear-gradient(90deg,var(--scene,#11110f),transparent)}
.wd-chips-mask::after{right:0;background:linear-gradient(270deg,var(--scene,#11110f),transparent)}

.wd-count{display:flex;align-items:center;justify-content:space-between;min-height:20px;margin:10px 2px 8px;font-size:12.5px;color:var(--dim,#8c8e83)}
.wd-count .wd-sortbtn{min-height:44px;margin:-12px 0;display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--muted,#b8b9ad);font-size:13px;cursor:pointer;padding:0 4px}
.wd-count .wd-sortbtn svg{width:14px;height:14px}

.wd-rcard{border:1px solid var(--border,#55564e);background:var(--panel-soft,rgba(42,43,39,.76));margin-bottom:8px}
.wd-rcard-main{display:flex;align-items:center;gap:10px;padding:12px;min-height:72px;cursor:pointer}
.wd-rcard-rk{flex:none;min-width:30px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--cond,'Barlow Condensed',sans-serif);font-weight:700;font-size:14px;border:1px solid var(--border,#55564e);color:var(--muted,#b8b9ad)}
.wd-rcard-rk.top{background:var(--accent,#d9ad32);border-color:var(--accent,#d9ad32);color:#141513}
.wd-rcard-hd{flex:1;min-width:0}
.wd-rcard-name{font-size:15px;font-weight:600;color:var(--text,#f2f1e8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-rcard-sub{margin-top:2px;font-size:12.5px;color:var(--dim,#8c8e83)}
.wd-rcard-val{flex:none;text-align:right;font-family:var(--cond,'Barlow Condensed',sans-serif);font-weight:600;font-size:17px;color:var(--accent,#d9ad32)}
.wd-rcard-more{display:none;padding:0 12px 12px;border-top:1px dashed var(--border,#55564e)}
.wd-rcard.open .wd-rcard-more{display:block}
.wd-rcard-more .wd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding-top:10px}
.wd-rcard-more .wd-f{min-width:0}
.wd-rcard-more .wd-f i{display:block;font-style:normal;font-size:11px;color:var(--dim,#8c8e83)}
.wd-rcard-more .wd-f b{font-weight:500;font-size:14px;color:var(--text,#f2f1e8);word-break:break-word}
.wd-rcard-more .wd-f b.mono{font-family:ui-monospace,Consolas,monospace;word-break:break-all}
.wd-rcard-acts{display:flex;gap:8px;padding-top:10px;flex-wrap:wrap}
.wd-rcard-acts .wd-btn{min-height:44px;flex:1;min-width:96px}
.wd-mine{border-left:3px solid var(--accent,#d9ad32)}

.wd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--border-strong,#a8a89a);background:var(--panel-soft,rgba(42,43,39,.76));color:var(--text,#f2f1e8);font-size:14.5px;cursor:pointer}
.wd-btn:hover{border-color:var(--accent,#d9ad32)}
.wd-btn[disabled]{opacity:.45;pointer-events:none}
.wd-btn.primary{border-color:var(--accent,#d9ad32);background:var(--accent-wash,rgba(188,140,22,.30));color:var(--text,#f2f1e8)}

/* 四态（§4.8） */
.wd-states{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px 12px;color:var(--muted,#b8b9ad)}
.wd-states svg{width:36px;height:36px;color:var(--dim,#8c8e83)}
.wd-states .wd-err-code{font-size:11px;color:var(--dim,#8c8e83)}
.wd-states .wd-acts{display:flex;gap:10px;margin-top:4px}
.wd-sk{display:flex;align-items:center;gap:10px;border:1px solid var(--border,#55564e);background:var(--panel-soft,rgba(42,43,39,.76));padding:14px 12px;margin-bottom:8px;min-height:72px}
.wd-sk i{border-radius:0;background:var(--row,#32332f);animation:wdpulse 1.3s ease-in-out infinite}
.wd-sk .s1{width:30px;height:24px}.wd-sk .s2{flex:1;height:14px}.wd-sk .s3{width:64px;height:20px}
@keyframes wdpulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wd-sk i{animation:none;opacity:.6}}
.wd-topbtn{position:fixed;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:70;width:44px;height:44px;display:none;align-items:center;justify-content:center;border:1px solid var(--border,#55564e);background:var(--panel,#141513);color:var(--text,#f2f1e8);cursor:pointer}
.wd-topbtn.show{display:flex}

/* Toast（顶部下滑，不遮 Tab Bar） */
.wd-toast{position:fixed;top:calc(64px + 8px);left:50%;transform:translate(-50%,-16px);z-index:200;max-width:92vw;background:var(--chrome,#1b1c19);border:1px solid var(--accent,#d9ad32);color:var(--text,#f2f1e8);font-size:14px;padding:10px 16px;opacity:0;transition:opacity 160ms,transform 160ms;pointer-events:none}
.wd-toast.show{opacity:1;transform:translate(-50%,0)}

/* 表格卡化（零 JS 方案，§4）：≤767px thead 隐藏、tr 成卡、td::before 列名由各页定义 */
@media (max-width:767px){
  table.wd-cards{display:block;width:100%}
  table.wd-cards thead{display:none}
  table.wd-cards tbody,table.wd-cards tr,table.wd-cards td{display:block;width:100%}
  table.wd-cards tr{border:1px solid var(--border,#55564e);background:var(--panel-soft,rgba(42,43,39,.76));margin-bottom:8px;padding:6px 0}
  table.wd-cards td{display:flex;align-items:baseline;gap:10px;padding:5px 12px;min-height:32px;border:0}
  table.wd-cards td::before{content:attr(data-th);flex:none;width:34%;font-size:11.5px;color:var(--dim,#8c8e83)}
  table.wd-cards td.wd-strong{color:var(--accent,#d9ad32);font-weight:600}
}