/*!
 * 3GQQ 家园 · 2018 H5 触屏社区模板 (Style 2018 H5)
 *
 * 设计语言参考：
 * 1. 仓库原生 2018 演进版模板 (`new_zishiying.css` / `style1.css` / `style2.css` / `style3.css` / Layui H5 社区)
 * 2. 2018 年手机 QQ 兴趣部落 / 贴吧 H5 / Discuz! 触屏版经典视觉：
 *    - 顶栏/主导航 (`#12B7F5 -> #0099EE` 手Q经典晴空蓝，38px 触屏高度，等分栅格/胶囊高亮)
 *    - 分区背景 (`#F2F4F7` 浅灰底色 + 模块间 8px 灰槽分隔 + 上下 1px `#E6E9ED` 细边线)
 *    - 栏目标题 (38px 标准触屏栏高 + 左侧 3px `#12B7F5` 手Q蓝竖标 + 15px 字重 + 底部分割细线)
 *    - 列表与楼层 (通栏白底 + 40px 圆角头像 + 14px~15px 舒适触屏行高 + `#EEF1F5` 细分割线 + 精致小徽章)
 *    - 表单与按钮 (`#12B7F5` 扁平主按钮 + 32px 标准触屏输入框，4px 微圆角，严禁表单元素溢出)
 */

:root {
  --h5-qq-blue: #12b7f5;
  --h5-qq-blue-dark: #0099ee;
  --h5-qq-blue-deep: #0078d4;
  --h5-link-blue: #1e6bc6;
  --h5-link-active: #ff5500;
  --h5-bg-page: #f2f4f7;
  --h5-bg-card: #ffffff;
  --h5-bg-subtle: #f8fafc;
  --h5-border: #e6e9ed;
  --h5-border-light: #eef1f5;
  --h5-text-main: #222222;
  --h5-text-sub: #666666;
  --h5-text-mute: #999999;
  --h5-red: #ff4d4f;
  --h5-orange: #ff7a00;
  --h5-gold-bg: #fffbe6;
  --h5-gold-border: #ffe58f;
}

/* --------------------------------------------------------------------------
   1. 视口与外壳（PC 端呈现 2018 H5 触屏视口，手机端 100% 满屏，严格防横向溢出）
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) {
  background-color: #e4e8ef;
  font-size: 10px !important;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(18, 183, 245, 0.12);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) body {
  max-width: 480px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  background-color: var(--h5-bg-page);
  color: var(--h5-text-main);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 14px !important;
  line-height: 1.65 !important;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  border: none !important;
  box-shadow: 0 0 20px rgba(15, 35, 65, 0.08);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) *,
html:not([data-skin="classic"]):not([data-skin="wap"]) *::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) *::after {
  box-sizing: border-box;
  overflow-wrap: break-word;
}

@media screen and (max-width: 500px) {
  html:not([data-skin="classic"]):not([data-skin="wap"]) {
    background-color: var(--h5-bg-page);
  }
  html:not([data-skin="classic"]):not([data-skin="wap"]) body {
    max-width: 100%;
    box-shadow: none;
  }
}

/* 链接与文字颜色系统 */
html:not([data-skin="classic"]):not([data-skin="wap"]) a {
  color: var(--h5-link-blue);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) a:visited {
  color: var(--h5-link-blue);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) a:hover,
html:not([data-skin="classic"]):not([data-skin="wap"]) a:active {
  color: var(--h5-qq-blue-dark);
  text-decoration: none;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) a.txt-red,
html:not([data-skin="classic"]):not([data-skin="wap"]) .txt-red,
html:not([data-skin="classic"]):not([data-skin="wap"]) .ad a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .ad001 a {
  color: var(--h5-red) !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .txt-gray,
html:not([data-skin="classic"]):not([data-skin="wap"]) .txt-fade,
html:not([data-skin="classic"]):not([data-skin="wap"]) .seperate,
html:not([data-skin="classic"]):not([data-skin="wap"]) .separate,
html:not([data-skin="classic"]):not([data-skin="wap"]) .pipe {
  color: var(--h5-text-mute) !important;
  margin: 0 3px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .txt-bold {
  font-weight: 600;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .txt-big {
  font-size: 15px !important;
  font-weight: 500;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .txt-small,
html:not([data-skin="classic"]):not([data-skin="wap"]) em {
  color: var(--h5-text-mute);
  font-size: 12px !important;
  font-style: normal;
}

/* 隐藏已废弃的 Flash object/embed 及外链统计，防止空白占位 */
html:not([data-skin="classic"]):not([data-skin="wap"]) object,
html:not([data-skin="classic"]):not([data-skin="wap"]) embed {
  display: none !important;
}

/* 图片与多媒体自适应 */
html:not([data-skin="classic"]):not([data-skin="wap"]) img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) video,
html:not([data-skin="classic"]):not([data-skin="wap"]) audio {
  max-width: 100%;
  border-radius: 6px;
  margin: 6px 0;
}

/* --------------------------------------------------------------------------
   2. 顶部区域：Logo 栏、用户状态栏、黄色广播条 (.login-tips / .note)
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) .site-logo,
html:not([data-skin="classic"]):not([data-skin="wap"]) .logo,
html:not([data-skin="classic"]):not([data-skin="wap"]) #head {
  padding: 10px 12px !important;
  height: auto !important;
  background-color: var(--h5-bg-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  border-top: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .site-logo img,
html:not([data-skin="classic"]):not([data-skin="wap"]) .logo img {
  max-height: 28px;
  width: auto;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content.user-info,
html:not([data-skin="classic"]):not([data-skin="wap"]) .user-info,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-top-line {
  padding: 8px 12px !important;
  background-color: var(--h5-bg-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  color: var(--h5-text-sub);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .user-info img,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-top-line img {
  margin: 0 3px 0 0;
  vertical-align: -2px;
  max-height: 16px;
}

/* 广播喇叭条 / 提示条（2018 H5 暖金黄通栏通知条） */
html:not([data-skin="classic"]):not([data-skin="wap"]) .login-tips,
html:not([data-skin="classic"]):not([data-skin="wap"]) .note,
html:not([data-skin="classic"]):not([data-skin="wap"]) .note2,
html:not([data-skin="classic"]):not([data-skin="wap"]) .tips {
  padding: 7px 12px !important;
  background-color: var(--h5-gold-bg) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--h5-gold-border) !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: #8c5800;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .login-tips ul,
html:not([data-skin="classic"]):not([data-skin="wap"]) .login-tips li {
  margin: 0;
  padding: 0;
  list-style: none;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .login-tips img,
html:not([data-skin="classic"]):not([data-skin="wap"]) .note img {
  margin-right: 6px;
  vertical-align: -2px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .login-tips a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .note a {
  color: #b55a00 !important;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   3. 主导航栏 / 蓝色面包屑顶栏 (.bar / .main-nav / .crumb-nav / .title-nav / .bnav)
      2018 手机 QQ 经典晴空蓝 (#12B7F5 -> #0099EE)，38px 触屏高度
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar,
html:not([data-skin="classic"]):not([data-skin="wap"]) .crumb-nav,
html:not([data-skin="classic"]):not([data-skin="wap"]) .crumb-nav-large,
html:not([data-skin="classic"]):not([data-skin="wap"]) .title-nav,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bnav {
  height: auto !important;
  min-height: 38px;
  line-height: 24px !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  background: linear-gradient(90deg, #12b7f5 0%, #0099ee 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 120, 212, 0.12);
}

/* 修复 index.html 中 <div class="bar"><p class="bar"> 嵌套导致的双重内边距与双倍高度 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar p.bar,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar p {
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 24px !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .bar a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .crumb-nav a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .crumb-nav-large a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .title-nav a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bnav a {
  color: #ffffff !important;
  display: inline-block;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 4px;
  font-weight: 400;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .bar a:hover,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar a:active,
html:not([data-skin="classic"]):not([data-skin="wap"]) .crumb-nav a:hover,
html:not([data-skin="classic"]):not([data-skin="wap"]) .title-nav a:hover,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bnav a:hover {
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
}

/* 门户多行主导航 (.main-nav / .mainnav / .xk_nav) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .main-nav,
html:not([data-skin="classic"]):not([data-skin="wap"]) .mainnav,
html:not([data-skin="classic"]):not([data-skin="wap"]) .xk_nav {
  padding: 6px 8px !important;
  height: auto !important;
  background: linear-gradient(135deg, #12b7f5 0%, #008ce6 100%) !important;
  border: none !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .main-nav p,
html:not([data-skin="classic"]):not([data-skin="wap"]) .mainnav p {
  height: auto !important;
  line-height: 28px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .main-nav p a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .mainnav p a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .xk_nav a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500;
  padding: 2px 6px !important;
  margin: 0 !important;
  border-radius: 4px;
  text-shadow: none !important;
}

/* 搜索栏 (.search-box) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .search-box {
  padding: 8px 12px !important;
  background-color: var(--h5-bg-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--h5-border) !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .search-box form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .search-box input[type="text"] {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}

/* 二级 Tab 切换栏 (.tab-nav / .title) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .tab-nav,
html:not([data-skin="classic"]):not([data-skin="wap"]) .tab-nav-wide {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px !important;
  background: var(--h5-bg-card) !important;
  border-bottom: 1px solid var(--h5-border) !important;
  font-size: 14px !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .tab-nav a.current,
html:not([data-skin="classic"]):not([data-skin="wap"]) .tab-nav-wide a.current {
  color: var(--h5-qq-blue-dark) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--h5-qq-blue);
  padding-bottom: 8px;
}

/* --------------------------------------------------------------------------
   4. 模块标题栏 (.module-title / .bodule-title / .column-title / .name / .pname / .wap-sec-title)
      2018 H5 经典左竖标 + 8px 灰槽分隔 + 38px 触屏高度
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) .module-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bodule-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .column-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .name,
html:not([data-skin="classic"]):not([data-skin="wap"]) .pname,
html:not([data-skin="classic"]):not([data-skin="wap"]) .game_header,
html:not([data-skin="classic"]):not([data-skin="wap"]) .aa,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-sec-title {
  position: relative;
  margin: 8px 0 0 0 !important;
  padding: 8px 12px 8px 18px !important;
  height: auto !important;
  min-height: 38px;
  line-height: 22px !important;
  background-color: var(--h5-bg-card) !important;
  background-image: none !important;
  border-top: 1px solid var(--h5-border) !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  color: var(--h5-text-main) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* 左侧 3px 手Q蓝竖标 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .module-title::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bodule-title::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .column-title::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .name::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .pname::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .game_header::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .aa::before,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-sec-title::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--h5-qq-blue);
}

/* 紧跟在顶栏/广播条之后的第一个模块标题不加顶部 8px 灰槽 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar + .module-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar + .bodule-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar + .name,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bar + .wap-sec-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .main-nav + .bodule-title,
html:not([data-skin="classic"]):not([data-skin="wap"]) .search-box + .bodule-title {
  margin-top: 0 !important;
  border-top: none !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-title a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bodule-title a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .column-title a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .name a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .aa a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-sec-title a {
  color: var(--h5-text-main) !important;
  font-weight: 600;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-title span,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bodule-title span,
html:not([data-skin="classic"]):not([data-skin="wap"]) .column-title span {
  font-weight: 400;
  font-size: 13px !important;
  color: var(--h5-text-sub);
  margin: 0 4px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-title span a,
html:not([data-skin="classic"]):not([data-skin="wap"]) .bodule-title span a {
  color: var(--h5-link-blue) !important;
  font-weight: 400;
}

/* 帖子详情二级标题栏 / 版块筛选栏 (.title) — 排除注册表单 .submit .title */
html:not([data-skin="classic"]):not([data-skin="wap"]) .title:not(.submit .title) {
  padding: 8px 12px !important;
  background-color: var(--h5-bg-subtle) !important;
  border-bottom: 1px solid var(--h5-border) !important;
  color: var(--h5-text-main) !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 22px !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .title:not(.submit .title) a {
  color: var(--h5-link-blue) !important;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. 内容卡片、列表行、帖子正文与楼层 (.module-content / .box / .list .row / .text / .item)
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content,
html:not([data-skin="classic"]):not([data-skin="wap"]) .box:not(.submit .box),
html:not([data-skin="classic"]):not([data-skin="wap"]) .bline,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-bare-line {
  padding: 9px 12px !important;
  margin: 0 !important;
  background-color: var(--h5-bg-card) !important;
  border: none !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  border-radius: 0 !important;
  line-height: 1.7 !important;
  color: var(--h5-text-main);
}

/* 当 .box 内部还包裹了 .module-title + .module-content 时（如 index.html 底部友链区），外层 .box 不加内边距 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .box:not(.submit .box):has(> .module-title) {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content.deep,
html:not([data-skin="classic"]):not([data-skin="wap"]) .deep {
  background-color: #f9fbfd !important;
  border-top: none !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
}

/* 单行截断列表 (.wid) 在 H5 下保持整洁单行省略或自适应 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content.wid {
  padding: 8px 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 论坛帖子列表与回帖列表 (.list / .row) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .list {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--h5-bg-card);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .list .row {
  padding: 10px 12px !important;
  margin: 0 !important;
  background-color: var(--h5-bg-card) !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  line-height: 1.65 !important;
  font-size: 14px !important;
  transition: background-color 0.12s ease;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .list .row:empty {
  display: none !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .list .row:hover {
  background-color: #fafcfe !important;
}

/* 2018 H5 列表徽章（置顶 / 精华 / 礼 / 图 / 楼层号） */
html:not([data-skin="classic"]):not([data-skin="wap"]) .h5-badge {
  display: inline-block;
  padding: 0 5px;
  height: 18px;
  line-height: 18px;
  font-size: 11px !important;
  font-weight: 500;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: 1px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .h5-badge-top {
  background-color: #fff1f0;
  color: #f5222d !important;
  border: 1px solid #ffa39e;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .h5-badge-good {
  background-color: #fff7e6;
  color: #fa8c16 !important;
  border: 1px solid #ffd591;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .h5-badge-lock {
  background-color: #f0f5ff;
  color: #2f54eb !important;
  border: 1px solid #adc6ff;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .h5-badge-floor {
  background-color: #f0f7ff;
  color: #1296db !important;
  border: 1px solid #d1e9ff;
  font-size: 11px !important;
  padding: 0 6px;
  border-radius: 10px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .h5-row-idx {
  display: inline-block;
  min-width: 18px;
  color: var(--h5-text-mute);
  font-size: 13px;
  font-weight: 500;
  margin-right: 2px;
}

/* 帖子正文区 (.text) 与附加信息区 (.item) — 排除注册表单 .submit 及门户列表 .wrap .module .intro */
html:not([data-skin="classic"]):not([data-skin="wap"]) .text:not(.submit .text):not(.wrap .module .intro .item .text) {
  padding: 12px !important;
  background-color: var(--h5-bg-card) !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--h5-text-main);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .item:not(.submit .item):not(.wrap .module .intro .item) {
  padding: 9px 12px !important;
  background-color: var(--h5-bg-card) !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  line-height: 1.65 !important;
  font-size: 13px !important;
  color: var(--h5-text-sub);
}

/* 帖子内代码高亮框 (.code / pre.prettyprint) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .code,
html:not([data-skin="classic"]):not([data-skin="wap"]) pre.prettyprint {
  margin: 8px 0 !important;
  padding: 10px 12px !important;
  background: #f6f8fa !important;
  border: 1px solid #e1e4e8 !important;
  border-left: 3px solid var(--h5-qq-blue) !important;
  border-radius: 4px !important;
  font-family: Consolas, Menlo, Monaco, monospace !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 分隔线 (.line / .dotline / .draw-line / .wap-divider) 转为 2018 H5 8px 灰槽或细分割线 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .line,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-divider {
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--h5-bg-page) !important;
  border: none !important;
  border-bottom: 1px solid var(--h5-border) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .dotline,
html:not([data-skin="classic"]):not([data-skin="wap"]) .draw-line {
  border: none !important;
  border-bottom: 1px dashed var(--h5-border) !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  height: 1px !important;
}

/* 首页在线帅哥美女横向头像滚动区 & 友友动态列表 (.rbox1 / ul.dtuser) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .rbox1 {
  background-color: var(--h5-bg-card) !important;
  padding: 10px 12px !important;
  border: none !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) ul.dtuser {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 当 ul.dtuser 里的 li 是纯文字动态（不含头像 img）时，按 H5 纵向动态流展示 */
html:not([data-skin="classic"]):not([data-skin="wap"]) ul.dtuser:has(li:not(:has(img))) {
  flex-direction: column;
  gap: 6px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) ul.dtuser li:has(img) {
  float: none !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) ul.dtuser li:has(img)::before {
  display: none !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) ul.dtuser li:not(:has(img)) {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 0 2px 14px !important;
  line-height: 1.6 !important;
  color: var(--h5-text-main);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) ul.dtuser li img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid #e6f4ff !important;
  padding: 0 !important;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(18, 183, 245, 0.15);
}

/* 游戏操作结果提示横幅 (.pc-msg-ok / .pc-msg-err) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .pc-msg-ok {
  margin: 0 !important;
  padding: 8px 12px !important;
  background-color: #f6ffed !important;
  border: none !important;
  border-bottom: 1px solid #b7eb8f !important;
  color: #237804 !important;
  font-size: 13px !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .pc-msg-err {
  margin: 0 !important;
  padding: 8px 12px !important;
  background-color: #fff2f0 !important;
  border: none !important;
  border-bottom: 1px solid #ffccc7 !important;
  color: #cf1322 !important;
  font-size: 13px !important;
}

/* 游戏大厅表格列表 (.module-content table) */
html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content table {
  width: 100%;
  border-collapse: collapse;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content table th {
  width: 72px;
  padding: 4px 10px 4px 0;
  vertical-align: top;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .module-content table td {
  padding: 1px 0;
  font-size: 13px;
  color: var(--h5-text-sub);
}

/* --------------------------------------------------------------------------
   6. 表单控件与按钮（2018 H5 触屏圆角输入框 + 手Q蓝扁平主按钮，严禁横向溢出）
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) form {
  margin: 0;
}

/* 裸写在 body 下的表单（如 login.html）自动包裹为卡片内边距，但排除 <form style="display:inline"> */
html:not([data-skin="classic"]):not([data-skin="wap"]) body > form:not([style*="inline"]) {
  display: block;
  padding: 12px !important;
  background-color: var(--h5-bg-card);
  border-bottom: 1px solid var(--h5-border-light);
}

/* 注册页表单 (.submit .item) 2018 H5 弹性行布局，彻底消除 common.css float 引起的重叠与溢出 */
html:not([data-skin="classic"]):not([data-skin="wap"]) .submit {
  padding: 8px 12px !important;
  background-color: var(--h5-bg-card) !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit .item {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--h5-border-light) !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit .item .text {
  float: none !important;
  width: 72px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 14px !important;
  color: var(--h5-text-main);
  text-align: right;
  flex-shrink: 0;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit .item .box {
  float: none !important;
  flex: 1;
  min-width: 0;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit .item .box input {
  flex: 1;
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit #send {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 32px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  background: #f0f7ff !important;
  color: var(--h5-qq-blue-dark) !important;
  border: 1px solid #b3e0ff !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit .title {
  padding: 6px 0 !important;
  font-size: 12px !important;
  color: var(--h5-text-sub);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="text"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="password"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="number"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="search"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="tel"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input:not([type]),
html:not([data-skin="classic"]):not([data-skin="wap"]) .ipt-txt,
html:not([data-skin="classic"]):not([data-skin="wap"]) select {
  height: 32px !important;
  max-width: 100%;
  padding: 4px 10px !important;
  margin: 3px 4px 3px 0;
  background-color: #f7f9fc !important;
  border: 1px solid #d4dce6 !important;
  border-radius: 4px !important;
  color: var(--h5-text-main) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  vertical-align: middle;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) textarea,
html:not([data-skin="classic"]):not([data-skin="wap"]) .ta-border {
  width: 100% !important;
  max-width: 100%;
  min-height: 76px;
  padding: 8px 10px !important;
  margin: 4px 0 8px 0 !important;
  background-color: #f7f9fc !important;
  border: 1px solid #d4dce6 !important;
  border-radius: 6px !important;
  color: var(--h5-text-main) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-sizing: border-box;
  outline: none;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="text"]:focus,
html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="password"]:focus,
html:not([data-skin="classic"]):not([data-skin="wap"]) input:not([type]):focus,
html:not([data-skin="classic"]):not([data-skin="wap"]) select:focus,
html:not([data-skin="classic"]):not([data-skin="wap"]) textarea:focus {
  background-color: #ffffff !important;
  border-color: var(--h5-qq-blue) !important;
  box-shadow: 0 0 0 2px rgba(18, 183, 245, 0.15) !important;
}

/* 分页页码小输入框 (.ipt-s / size="3" / size="4") */
html:not([data-skin="classic"]):not([data-skin="wap"]) .ipt-s,
html:not([data-skin="classic"]):not([data-skin="wap"]) input[size="3"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input[size="4"],
html:not([data-skin="classic"]):not([data-skin="wap"]) input[name="page"] {
  width: 58px !important;
  text-align: center;
}

/* 按钮：2018 手Q蓝扁平主按钮 & 浅灰次级按钮 */
html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="submit"],
html:not([data-skin="classic"]):not([data-skin="wap"]) button[type="submit"],
html:not([data-skin="classic"]):not([data-skin="wap"]) button:not([type]):not(.submit button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 64px;
  height: 32px !important;
  padding: 0 14px !important;
  margin: 3px 4px 3px 0;
  background: linear-gradient(90deg, #12b7f5 0%, #0099ee 100%) !important;
  border: none !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 32px !important;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(18, 183, 245, 0.22);
}

/* 行内小表单操作按钮（如农场收获、宠物喂食、空间删除等 <form style="display:inline">） */
html:not([data-skin="classic"]):not([data-skin="wap"]) form[style*="inline"] input[type="submit"],
html:not([data-skin="classic"]):not([data-skin="wap"]) form[style*="inline"] button {
  min-width: 0 !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 9px !important;
  margin: 1px 2px !important;
  font-size: 12px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .submit button {
  display: block;
  width: 100% !important;
  height: 40px !important;
  line-height: 40px !important;
  margin: 14px 0 6px 0 !important;
  background: linear-gradient(90deg, #12b7f5 0%, #0099ee 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(18, 183, 245, 0.28);
}

html:not([data-skin="classic"]):not([data-skin="wap"]) input[type="button"],
html:not([data-skin="classic"]):not([data-skin="wap"]) button[type="button"],
html:not([data-skin="classic"]):not([data-skin="wap"]) .ipt-btn-gray-s,
html:not([data-skin="classic"]):not([data-skin="wap"]) .ipt-btn-gray-m,
html:not([data-skin="classic"]):not([data-skin="wap"]) .ipt-btn-gray-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 56px;
  height: 32px !important;
  padding: 0 12px !important;
  margin: 3px 4px 3px 0;
  background: #f2f4f8 !important;
  border: 1px solid #d4dce6 !important;
  border-radius: 4px !important;
  color: var(--h5-text-main) !important;
  font-size: 13px !important;
  line-height: 30px !important;
  cursor: pointer;
  vertical-align: middle;
}

/* 回帖表情弹出面板 (#SmohanFaceBox 等) 适配 H5 宽度，防止 360px 固定宽撑破小屏 */
html:not([data-skin="classic"]):not([data-skin="wap"]) #SmohanFaceBox,
html:not([data-skin="classic"]):not([data-skin="wap"]) #SmohanFaceBoxa,
html:not([data-skin="classic"]):not([data-skin="wap"]) #SmohanFaceBoxb,
html:not([data-skin="classic"]):not([data-skin="wap"]) #SmohanFaceBoxc,
html:not([data-skin="classic"]):not([data-skin="wap"]) #SmohanFaceBoxd,
html:not([data-skin="classic"]):not([data-skin="wap"]) #SmohanFaceBox6 {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  box-sizing: border-box;
  border-radius: 6px !important;
  border-color: var(--h5-border) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* --------------------------------------------------------------------------
   7. 页脚区域 (.footer / #footer / .wap-footer)
   -------------------------------------------------------------------------- */
html:not([data-skin="classic"]):not([data-skin="wap"]) .footer,
html:not([data-skin="classic"]):not([data-skin="wap"]) #footer,
html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-footer {
  margin-top: 8px !important;
  padding: 12px !important;
  background-color: var(--h5-bg-card) !important;
  border-top: 1px solid var(--h5-border) !important;
  color: var(--h5-text-sub) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  text-align: center;
}

html:not([data-skin="classic"]):not([data-skin="wap"]) .wap-footer + .wap-footer {
  margin-top: 0 !important;
  padding-top: 4px !important;
  border-top: none !important;
}

/* --------------------------------------------------------------------------
   7.5 精修 WAP 模式 (data-skin="wap")：还原 2012 腾讯 3GQQ 经典蓝白渐变条
   -------------------------------------------------------------------------- */
html[data-skin="wap"] {
  background-color: #eef3f9;
}
html[data-skin="wap"] body {
  max-width: 480px;
  margin: 0 auto !important;
  padding: 0 !important;
  background-color: #ffffff;
  color: #1f1f1f;
  font-family: Tahoma, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px !important;
  line-height: 1.65 !important;
  border-left: 1px solid #b6cde6;
  border-right: 1px solid #b6cde6;
  overflow-x: hidden;
}
html[data-skin="wap"] .bar,
html[data-skin="wap"] .crumb-nav,
html[data-skin="wap"] .crumb-nav-large,
html[data-skin="wap"] .title-nav,
html[data-skin="wap"] .bnav {
  height: auto !important;
  min-height: 28px;
  line-height: 28px !important;
  padding: 0 8px !important;
  background: linear-gradient(180deg, #59bafd 0px, #409ae1 2px, #3487d5 12px, #2e73c6 13px, #388ed9 23px, #296bba 100%) !important;
  color: #fff !important;
}
html[data-skin="wap"] .bar p.bar {
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}
html[data-skin="wap"] .bar a,
html[data-skin="wap"] .crumb-nav a,
html[data-skin="wap"] .crumb-nav-large a,
html[data-skin="wap"] .title-nav a {
  color: #fff !important;
}
html[data-skin="wap"] .module-title,
html[data-skin="wap"] .bodule-title,
html[data-skin="wap"] .name,
html[data-skin="wap"] .aa,
html[data-skin="wap"] .wap-sec-title {
  padding: 4px 8px !important;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5fc 100%) !important;
  border-top: 1px solid #dbeaf9 !important;
  border-bottom: 2px solid #9fc6ec !important;
  font-weight: bold !important;
}
html[data-skin="wap"] .module-content,
html[data-skin="wap"] .box:not(.submit .box),
html[data-skin="wap"] .list .row,
html[data-skin="wap"] .wap-bare-line {
  padding: 5px 8px !important;
  border-bottom: 1px solid #e3e6eb !important;
}

/* --------------------------------------------------------------------------
   8. 底部三态模板切换条（2018 H5 触屏版 | 精修 WAP | 2012 原版）
   -------------------------------------------------------------------------- */
.wap-skin-switcher {
  padding: 10px 12px;
  background-color: #eef2f7;
  border-top: 1px solid #dcdfe6;
  text-align: center;
  font-size: 12px;
  line-height: 22px;
  color: #666666;
}

.wap-skin-switcher a {
  display: inline-block;
  color: #1e6bc6;
  margin: 0 3px;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
}

.wap-skin-switcher a.current {
  background-color: #12b7f5;
  color: #ffffff !important;
  font-weight: 500;
  cursor: default;
}