@charset "utf-8";

/*
 * 手机端排版 (显示模式为 mobile 时才生效)。
 *
 * 后端只渲染一套 HTML, 手机与桌面的差别全部落在 CSS 上; 当前模式写在
 * <html data-mode="mobile|desktop">, 判定见 static/js/appearance.js: <head> 同步加载, 在首帧绘制前写好该属性。
 * 之所以按模式选择器而不是 @media 断点来分: 读者可以在"外观设置"里显式指定模式,
 * 显式指定时必须压过屏幕尺寸(窄窗口的桌面也走手机排版, 平板想用桌面也用桌面排版)。
 *
 * 本文件两部分:
 *   1. 下面的"旧 style_mobile.css"整段由脚本从原手机样式表加前缀生成: 原先手机模板只加载
 *      style_mobile.css, 现在它和 style.css 一起加载, 因此每条规则都限定在 mobile 模式内,
 *      靠 html[data-mode=mobile] 的高一级特异性盖掉桌面基线。
 *   2. 文件末尾的"显示模式层"是合并两套模板后新增的规则: 取消 960px 固定宽度、
 *      侧栏落到正文之后、只在某一模式出现的元素等。
 */

/* ===== 1. 手机端基线样式 (由 style_mobile.css 逐条加模式前缀生成) ===== */

html[data-mode="mobile"] body, html[data-mode="mobile"] h1, html[data-mode="mobile"] h2, html[data-mode="mobile"] h3, html[data-mode="mobile"] h4, html[data-mode="mobile"] h5, html[data-mode="mobile"] h6, html[data-mode="mobile"] p, html[data-mode="mobile"] blockquote, html[data-mode="mobile"] dl, html[data-mode="mobile"] dt, html[data-mode="mobile"] dd, html[data-mode="mobile"] ul, html[data-mode="mobile"] ol, html[data-mode="mobile"] li, html[data-mode="mobile"] pre, html[data-mode="mobile"] fieldset, html[data-mode="mobile"] lengend, html[data-mode="mobile"] button, html[data-mode="mobile"] input, html[data-mode="mobile"] textarea, html[data-mode="mobile"] th, html[data-mode="mobile"] td {
  margin: 0;padding: 0;
}
html[data-mode="mobile"] body, html[data-mode="mobile"] button, html[data-mode="mobile"] input, html[data-mode="mobile"] select, html[data-mode="mobile"] textarea {
  font: 0.875rem/1 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
}
html[data-mode="mobile"] button, html[data-mode="mobile"] input, html[data-mode="mobile"] select, html[data-mode="mobile"] textarea {
  padding:3px; line-height:1em; margin:0;
}
html[data-mode="mobile"] textarea {
  line-height:150%;resize: none;
}
html[data-mode="mobile"] input {
  line-height:normal;
}
html[data-mode="mobile"] h1 {
  font-size:1.5rem;
}
html[data-mode="mobile"] h2 {
  font-size:1.375rem;
}
html[data-mode="mobile"] h3 {
  font-size:1.25rem;
}
html[data-mode="mobile"] h4 {
  font-size:1.125rem;
}
html[data-mode="mobile"] h5 {
  font-size:0.9375rem;
}
html[data-mode="mobile"] h1, html[data-mode="mobile"] h2, html[data-mode="mobile"] h3, html[data-mode="mobile"] h4, html[data-mode="mobile"] h5 {
  font-weight:normal;
}
html[data-mode="mobile"] small {
  font-size: 0.6875rem;
}
html[data-mode="mobile"] img {
  border: none;
}
html[data-mode="mobile"] p {
  line-height:180%;margin-bottom:20px;
}
html[data-mode="mobile"] pre {
  white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;
}
html[data-mode="mobile"] {
  height: 100%;
}
html[data-mode="mobile"] body {
  padding: 0px;margin: 0px;background-color: var(--bg-body); color: var(--text-primary);
}
/* 手机端默认字体要让位给"外观设置 > 字体选择" (theme.css 的 html.font-sans/.font-serif/.font-kaiti,
   类挂在 <html> 上, 由 appearance.js 读写)。合并模板时给旧样式加了 html[data-mode] 前缀,
   属性选择器抬高了特异性, 同为 !important 时它压过字体类, 字体选择就再也不生效了 ——
   这里用 :not() 把选过字体的读者排除掉。 */
html[data-mode="mobile"]:not(.font-sans):not(.font-serif):not(.font-kaiti) body {
  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;
}
html[data-mode="mobile"] a:link {
  color: var(--link-color);text-decoration: none;
}
html[data-mode="mobile"] a:active {
  color: var(--link-hover);text-decoration: none;
}
html[data-mode="mobile"] a:visited {
  color: var(--link-color);text-decoration: none;
}
html[data-mode="mobile"] a:hover {
  color: var(--link-hover);text-decoration: underline;
}
html[data-mode="mobile"] .c {
  clear:both;
}
html[data-mode="mobile"] .float-left {
  float:left;
}
html[data-mode="mobile"] .float-right {
  float:right;
}
html[data-mode="mobile"] .text-center {
  text-align:center;
}
html[data-mode="mobile"] .center-align {
  margin:0 auto;
}
html[data-mode="mobile"] .div-align {
  display:block;width:100%;text-align:center;
}
html[data-mode="mobile"] .grey {
  color: var(--text-tertiary);
}
html[data-mode="mobile"] .red {
  color: var(--text-red);
}
html[data-mode="mobile"] .fs12 {
  font-size:0.75rem;line-height:1.2em;
}
html[data-mode="mobile"] .fs14 {
  font-size:0.875rem;line-height:20px;
}
html[data-mode="mobile"] .textbtn {
  cursor: pointer; font-size: 0.75rem; line-height: 1.2em; padding: 2px 5px 2px 5px; border: 1px solid var(--border-button); border-radius: 5px; background-color: var(--bg-button); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; font-weight: bold; box-shadow: 0px 1px 2px var(--shadow-color);
}
html[data-mode="mobile"] .yl {
  color:yellow;
}
html[data-mode="mobile"] .c999 {
  color:var(--text-tertiary);
}
html[data-mode="mobile"] .c666 {
  color:var(--text-secondary);
}
html[data-mode="mobile"] .dsp1px {
  width: 1px;height: 1px;
}
html[data-mode="mobile"] img.avatar {
  -moz-border-radius: 4px;border-radius: 4px;
}
html[data-mode="mobile"] .avatar24 {
  width: 24px; height: 24px;
}
html[data-mode="mobile"] .avatar48 {
  width: 48px; height: 48px;
}
html[data-mode="mobile"] .avatar73 {
  width: 73px; height: 73px;
}
html[data-mode="mobile"] .header-wrap {
  width:100%;height:48px;color:var(--text-header);background: var(--bg-header) var(--bg-image-header) repeat-x bottom center;padding: 5px 0;
}
html[data-mode="mobile"] .header {
  width:100%;margin:0 auto;color:var(--text-secondary);vertical-align: middle;font-size: 0.9375rem;line-height:19px;font-weight: 500;
}
html[data-mode="mobile"] .header a {
  color:var(--link-header);text-decoration:none;
}
html[data-mode="mobile"] .header a:hover {
  color:var(--text-header-hover);text-decoration:none;
}
html[data-mode="mobile"] .logo {
  margin-left:6px;display:block;float:left;font-size:2.25rem;line-height:40px;font-family:Arial, "宋体",Helvetica, sans-serif;
}
html[data-mode="mobile"] .logo a {
  text-decoration: none;color: var(--text-logo);text-shadow: var(--text-logo-shadow);-webkit-transition: color 0.25s linear;
}
html[data-mode="mobile"] .logo a:hover, html[data-mode="mobile"] .logo a:focus, html[data-mode="mobile"] .logo a:active {
  color: var(--text-logo-active);text-shadow: var(--text-logo-active-shadow);
}
html[data-mode="mobile"] .hdlogo {
  display:none;
}
html[data-mode="mobile"] .banner {
  float:right;padding:15px;
}
html[data-mode="mobile"] .banner img {
  vertical-align: middle;border-radius: 4px;
}
html[data-mode="mobile"] .avatar-mini {
  max-height:24px;max-width:24px;
}
html[data-mode="mobile"] .main-wrap {
  width:100%;background-color:var(--bg-main-wrap);padding:10px 0 1px 0;
}
html[data-mode="mobile"] .main {
  width:100%;margin:0;
}
html[data-mode="mobile"] .main-content {
  width:100%;
}
html[data-mode="mobile"] .tiptitle {
  margin:0 auto;width:80%;margin-bottom:10px;border-bottom:2px solid var(--border-box);padding:10px;color:var(--text-tiptitle);font-size:0.75rem;background-color:var(--bg-tiptitle);border-radius:5px;box-shadow: 0px 2px 5px var(--shadow-color);
}
html[data-mode="mobile"] .nav-title {
  border-bottom:1px solid var(--border-color);padding:10px;font-size:0.75rem;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow: 0px 2px 5px var(--shadow-color);color:var(--text-nav-title);background-color: var(--bg-nav-title);
}
html[data-mode="mobile"] .nav-title a {
  color: var(--text-nav-title);
}
html[data-mode="mobile"] .no-comment {
  margin:0 0 10px;width:auto;padding:10px;background-color:var(--bg-no-comment);border: 2px dashed var(--border-no-comment);color:var(--text-no-comment);text-align:center;
}
html[data-mode="mobile"] .main-box {
  padding:10px;margin-bottom:10px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;box-shadow: 0px 2px 5px var(--shadow-color);border-bottom: 2px solid var(--border-box);background: var(--bg-box) var(--bg-image-item) repeat-x bottom center;
}
html[data-mode="mobile"] .home-box-list {
  padding:10px 0 15px 0;
}
html[data-mode="mobile"] .topic-title {
  margin-bottom:10px;
}
html[data-mode="mobile"] .topic-title-main {
  width:auto; max-width:none; /* 基线的 560px 上限是给桌面窄栏用的, 手机排版要跟正文同宽 */
}
html[data-mode="mobile"] .topic-title h1 {
  margin-bottom:10px;font-size:1.25rem;font-weight: 500;line-height: 150%;color:var(--text-primary);WORD-WRAP: break-word;
}
html[data-mode="mobile"] .topic-title-date {
  font-size:0.75rem;color:var(--text-tertiary);border-bottom: 1px solid var(--border-box);padding-bottom:8px;
}
html[data-mode="mobile"] .topic-title-date a {
  color:var(--text-tertiary);font-weight:bold;
}
html[data-mode="mobile"] .topic-title-date a:hover {
  color:var(--text-secondary);
}
html[data-mode="mobile"] .detail-avatar {
  width:48px;height:48px;float:right;
}
html[data-mode="mobile"] .detail-avatar img {
  border-radius: 4px;width:48px;height:48px;
}
html[data-mode="mobile"] .topic-content {
  WORD-WRAP: break-word;line-height: 1.5em;
}
html[data-mode="mobile"] .topic-content img {
  display:block;margin-top:10px;max-width:100%;
}
html[data-mode="mobile"] .topic-content embed {
  display:block;margin-top:10px;max-width:100%;
}
html[data-mode="mobile"] .post-list {
  border-bottom: 1px solid var(--border-box);padding:0 10px 0 10px;margin-bottom:10px;background: var(--bg-image-item) repeat-x bottom center;
}
html[data-mode="mobile"] .item-avatar {
  width:28px;height:28px;float:left;
}
html[data-mode="mobile"] .item-avatar img {
  max-height:24px;max-width:24px;border-radius: 4px;
}
html[data-mode="mobile"] .item-content {
  max-width:74%;min-height:48px;margin: 0 0 5px 5px;float:left;WORD-WRAP: break-word;
}
html[data-mode="mobile"] .count0 {
  max-width:88%;
}
html[data-mode="mobile"] .item-date {
  color:var(--text-tertiary);font-size:0.75rem;
}
html[data-mode="mobile"] .item-date a {
  color:var(--text-secondary);
}
html[data-mode="mobile"] .item-date a:hover {
  color:var(--text-primary);
}
html[data-mode="mobile"] .item-count {
  float:right;margin:12px 5px 0 0;
}
html[data-mode="mobile"] .item-count a {
  font-size: 0.75rem;line-height: 14px;font-weight: bold;border-radius: 14px;display: inline-block;background-color: var(--bg-badge);color: var(--text-badge);padding: 2px 10px 2px 10px;
}
html[data-mode="mobile"] .item-count a:hover {
  text-decoration:none;background-color:var(--bg-badge-hover);
}
html[data-mode="mobile"] .item-count a:visited {
  color:var(--text-badge);background-color:var(--bg-badge);
}
html[data-mode="mobile"] .item-content h1 {
  font-size: 1rem;line-height:130%;margin-bottom:8px;min-height:28px;
}
html[data-mode="mobile"] .node-detail {
  border-bottom:1px solid var(--border-box);margin-bottom:15px;
}
html[data-mode="mobile"] .node-img {
  float:left;margin:0 10px 10px 0;height:73px;width:73px;
}
html[data-mode="mobile"] .node-img img {
  max-width:73px;max-height:73px;border-radius: 4px;
}
html[data-mode="mobile"] .node-data {
  float:left;width:560px;font-size:0.75rem;color:var(--text-tertiary);
}
html[data-mode="mobile"] .pagination {
  margin-top:15px;padding:0 10px 0 10px;
}
html[data-mode="mobile"] .pagination a {
  font-size:0.75rem;display:block;line-height:1.5em;padding:2px 5px 2px 5px;border:1px solid var(--border-button);border-radius: 5px;background-color: var(--bg-button); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; font-weight: bold; -moz-box-shadow: 0px 1px 2px rgba(66, 66, 77, 0.3);
}
html[data-mode="mobile"] .pagination a:hover {
  background-color: var(--bg-button-hover); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; text-decoration: none; font-weight: bold; cursor: pointer; -moz-box-shadow: 0px 1px 2px rgba(66, 66, 77, 0.2);
}
html[data-mode="mobile"] .pagination a:active {
  background-color: var(--bg-button); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; text-decoration: none; font-weight: bold; cursor: pointer; -moz-box-shadow: 0px 1px 2px rgba(66, 66, 77, 0.2);
}
html[data-mode="mobile"] .newpostbtn {
  font-size:0.75rem;display:block;line-height:1.2em;padding:2px 5px 2px 5px;border:1px solid var(--border-button);border-radius: 5px;background-color: var(--bg-button); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; font-weight: bold; box-shadow: 0px 1px 2px var(--shadow-color);
}
html[data-mode="mobile"] .newpostbtn:hover {
  background-color: var(--bg-button-hover); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; text-decoration: none; font-weight: bold; cursor: pointer; box-shadow: 0px 1px 2px var(--shadow-color);
}
html[data-mode="mobile"] .newpostbtn:active {
  background-color: var(--bg-button); color: var(--text-primary); text-shadow: var(--text-shadow-button); text-decoration: none; text-decoration: none; font-weight: bold; cursor: pointer; box-shadow: 0px 1px 2px var(--shadow-color);
}
html[data-mode="mobile"] .commont-item {
  border-bottom: 1px solid var(--border-box);padding:0 10px 0 10px;padding:0 10px 0 10px;margin-bottom:15px;background: var(--bg-image-item) repeat-x bottom center;
}
html[data-mode="mobile"] .commont-avatar {
  width:32px;height:28px;float:left;
}
html[data-mode="mobile"] .commont-avatar img {
  max-height:24px;max-width:24px;border-radius: 4px;
}
html[data-mode="mobile"] .commont-data {
  float:left;width:89%;
}
html[data-mode="mobile"] .commont-data-date {
  color:var(--text-tertiary);font-size: 0.75rem;margin-bottom:4px;
}
html[data-mode="mobile"] .commont-data-date a {
  color:var(--text-secondary);
}
html[data-mode="mobile"] .commont-data-date a:hover {
  color:var(--text-primary);
}
html[data-mode="mobile"] .commonet-count {
  font-size: 0.75rem;line-height: 12px;font-weight: 500;border-radius: 10px;display: inline-block;background-color: var(--bg-input);color: var(--text-secondary);padding: 2px 5px 2px 5px;
}
html[data-mode="mobile"] .comment-text {
  width: 95%; height: 150px;
}
html[data-mode="mobile"] .commont-content {
  WORD-WRAP: break-word;line-height: 1.5em;
}
html[data-mode="mobile"] .commont-content img {
  display:block;margin-top:10px;max-width:100%;
}
html[data-mode="mobile"] .commont-content embed {
  display:block;margin-top:10px;max-width:100%;
}
html[data-mode="mobile"] .main-box-node .btn a {
  display:block;padding:4px 8px;font-size:0.75rem;border:1px solid var(--border-node-btn);float:left;margin:0 4px 6px 0;color:var(--text-node-btn);background-color:var(--bg-node-btn);white-space: nowrap;border-radius: 4px;
}
html[data-mode="mobile"] .main-box-node .btn a:hover {
  border:1px solid var(--border-node-btn-hover);text-decoration:none;color:var(--text-node-btn-hover);background-color:var(--bg-node-btn-hover);
}
html[data-mode="mobile"] .scbox input {
  width:200px;height:24px;font-size: 0.875rem;line-height: 24px;outline: none;border-radius:20px;padding:0 6px 0 6px;background-color:var(--bg-input);color:var(--text-input);vertical-align: middle;
}
html[data-mode="mobile"] .member-avatar {
  float:left; margin:10px;width:73px;height:73px;
}
html[data-mode="mobile"] .member-avatar img {
  width: 73px;height: 73px;
}
html[data-mode="mobile"] .member-detail {
  float:left; margin:10px;WORD-WRAP: break-word;
}
html[data-mode="mobile"] .member-detail p {
  color:var(--text-primary);font-size:0.75rem;line-height:16px;margin-bottom:5px;
}
html[data-mode="mobile"] .user-list {
  margin:20px;
}
html[data-mode="mobile"] .user-list li {
  margin-bottom:10px;
}
html[data-mode="mobile"] .mytag {
  font-size:0.8125rem;padding:2px 2px 2px 20px;margin:10px 2px 4px 2px;background: url(img/tag.gif) no-repeat 0 6px;color:var(--text-tertiary);
}
html[data-mode="mobile"] .has_adv {
  background-color:var(--bg-sider-box);padding:10px;margin-bottom:10px;
}
html[data-mode="mobile"] .has_adv h3 {
  color: var(--text-primary);font-size:0.8125rem;font-weight:bold;margin-bottom:6px;
}
html[data-mode="mobile"] .rel_list {
  list-style:none;margin-bottom:2px;
}
html[data-mode="mobile"] .rel_list li {
  float:left;width:98%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px;line-height:1.2em;
}
html[data-mode="mobile"] .rel_list li a {
  font-size:0.75rem;color:var(--text-primary);text-decoration: none;padding-left: 25px;background: url('img/dot.png') no-repeat 10px 6px;
}
html[data-mode="mobile"] .rel_list li a:hover {
  color:var(--text-primary);text-decoration: underline;
}
html[data-mode="mobile"] .bot-side-info {
  color: var(--text-tertiary);
}
html[data-mode="mobile"] .bot-side-info li {
  margin-bottom: 8px;
}
html[data-mode="mobile"] .footer-wrap {
  width:100%;margin-bottom:0px;color:var(--text-tertiary);background-color: var(--bg-footer);border-top:1px solid var(--border-color);
}
html[data-mode="mobile"] .footer {
  margin:0 auto;padding:10px;
}
html[data-mode="mobile"] .footer p {
  margin-bottom:1px;line-height:100%;
}
html[data-mode="mobile"] .footer p a {
  color:var(--text-secondary);font-weight:500;
}
html[data-mode="mobile"] .footer p a:hover {
  color:var(--text-primary);text-decoration:underline;
}
html[data-mode="mobile"] .sl {
  border-radius: 4px;padding: 5px;font-size: 0.875rem;border: 1px solid var(--border-input);box-shadow: 0pt 1px 2px rgba(0, 0, 0, 0.18) inset;width: 310px;font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;background-color: var(--bg-input);color: var(--text-primary);
}
html[data-mode="mobile"] .sl:focus {
  border: 1px solid rgba(128, 128, 160, 0.6);box-shadow: 0pt 1px 2px rgba(0, 0, 0, 0.18) inset, 0px 0px 5px rgba(128, 128, 160, 0.5);outline: none;
}
html[data-mode="mobile"] .ml {
  border-radius: 3px;padding: 5px;font-size: 0.875rem;border: 1px solid var(--border-input);display: block;width: 310px;height: 160px;box-shadow: 0pt 1px 2px rgba(0, 0, 0, 0.18) inset;font-family: "Panic Sans", "Menlo", "DejaVu Sans Mono", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;background-color: var(--bg-input);color: var(--text-primary);
}
html[data-mode="mobile"] .ml:focus {
  border: 1px solid rgba(128, 128, 160, 0.6);box-shadow: 0pt 1px 2px rgba(0, 0, 0, 0.18) inset, 0px 0px 5px rgba(128, 128, 160, 0.5);outline: none;
}
html[data-mode="mobile"] .sll {
  -moz-border-radius: 3px;-webkit-border-radius: 3px;padding: 3px;font-size: 0.875rem;border: 1px solid var(--border-input);width: 640px;font-family: "Panic Sans", "Menlo", "DejaVu Sans Mono", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;background-color: var(--bg-input);color: var(--text-primary);
}
html[data-mode="mobile"] .sll:focus {
  border: 1px solid rgba(128, 128, 160, 0.6);-moz-box-shadow: 0px 0px 5px rgba(128, 128, 160, 0.5);-webkit-box-shadow: 0px 0px 5px rgba(128, 128, 160, 0.5);outline: none;
}
html[data-mode="mobile"] .mll {
  -moz-border-radius: 3px;-webkit-border-radius: 3px;padding: 3px;font-size: 0.875rem;border: 1px solid var(--border-input);display: block;width: 640px;height: 140px;font-family: "Panic Sans", "Menlo", "DejaVu Sans Mono", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;background-color: var(--bg-input);color: var(--text-primary);
}
html[data-mode="mobile"] .mll:focus {
  border: 1px solid rgba(128, 128, 160, 0.6);-moz-box-shadow: 0px 0px 5px rgba(128, 128, 160, 0.5);-webkit-box-shadow: 0px 0px 5px rgba(128, 128, 160, 0.5);outline: none;
}
html[data-mode="mobile"] .tall {
  height: 140px;
}
html[data-mode="mobile"] .w50 {
  width:50px;
}
html[data-mode="mobile"] .w100 {
  width:100px;
}
html[data-mode="mobile"] .w150 {
  width:150px;
}
html[data-mode="mobile"] .w200 {
  width:200px;
}
html[data-mode="mobile"] .w300 {
  width:300px;
}
html[data-mode="mobile"] .w400 {
  width:400px;
}
html[data-mode="mobile"] .w450 {
  width:450px;
}
html[data-mode="mobile"] .w500 {
  width:500px;
}
html[data-mode="mobile"] .wb10 {
  width:10%;
}
html[data-mode="mobile"] .wb20 {
  width:20%;
}
html[data-mode="mobile"] .wb30 {
  width:30%;
}
html[data-mode="mobile"] .wb40 {
  width:40%;
}
html[data-mode="mobile"] .wb50 {
  width:50%;
}
html[data-mode="mobile"] .wb60 {
  width:60%;
}
html[data-mode="mobile"] .wb70 {
  width:70%;
}
html[data-mode="mobile"] .wb80 {
  width:80%;
}
html[data-mode="mobile"] .wb90 {
  width:90%;
}
html[data-mode="mobile"] .wb95 {
  width:95%;
}
html[data-mode="mobile"] .wb96 {
  width:96%;
}
html[data-mode="mobile"] .wb100 {
  width:100%;
}
html[data-mode="mobile"] .h60 {
  height:60px;
}
html[data-mode="mobile"] .badge-notification {
  padding: 3px 5px; vertical-align: middle; color: var(--text-badge); font-size: 0.6875rem; line-height: 1; text-align: center; background-color: var(--bg-badge); display: inline-block; font-weight: normal; white-space: nowrap; border-radius: 10px;
}
html[data-mode="mobile"] .clicks {
  font-weight: normal; background-color: var(--bg-input); top: -1px; color: var(--text-secondary); position: relative; margin-left: 2px; border: none;
}
html[data-mode="mobile"] .previews {
  padding: 10px 0 10px 0; border-bottom: 1px solid var(--border-previews);border-top: 1px solid var(--border-previews);
}
html[data-mode="mobile"] .no-comment2 {
  margin:0 auto;padding:10px 0 10px 0;background-color:var(--bg-box);margin-bottom:10px;border-top: 2px dashed var(--border-no-comment);border-bottom:2px dashed var(--border-no-comment);color:var(--text-no-comment);text-align:center;
}
html[data-mode="mobile"] .match {
  color: red;
}
html[data-mode="mobile"] .term0 {
  color: red;
}

/* ===== 2. 显示模式层 ===== */

/* 正文标题字号随"字体大小"设置缩放 (与桌面一致)。上方手机端基线把 h1..h3 钉成定值 rem,
   data-mode 前缀的特异性 (0,1,2) 又压过 typography 的 .prose h1 等 (0,1,1), 正文标题就
   不跟着 小/中/大 变了。这里在正文容器内把值还给 .prose 规则 (数值抄自 typography.min.css,
   em 相对正文容器字号, 容器又随根字号缩放)。 */
html[data-mode="mobile"] #article-content h1 { font-size: 2.25em; line-height: 1.1111111; font-weight: 800; }
html[data-mode="mobile"] #article-content h2 { font-size: 1.5em; line-height: 1.3333333; font-weight: 700; }
html[data-mode="mobile"] #article-content h3 { font-size: 1.25em; line-height: 1.6; font-weight: 600; }

/* 设置面板的遮罩只在手机排版(或窄屏)下有意义, 其余情况别让它参与布局 */
.settings-overlay { display: none; }

/* 外观设置: 手机排版下改成居中弹层, 不再挂在顶栏按钮下方。
   按 data-mode 而不是媒体查询来定, 显式选了手机模式的宽屏用户同样拿到弹层。 */
html[data-mode="mobile"] .settings-dropdown {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  width: min(86vw, 340px);
  max-height: 82vh;
  margin-top: 0;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 1000;
}

html[data-mode="mobile"] .settings-overlay.active {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
}

/* 弹层里每栏更紧凑些, 一屏能多看一栏 */
html[data-mode="mobile"] .settings-section { margin-bottom: 14px; }
html[data-mode="mobile"] .settings-option-btn { padding: 8px 14px; }

/* 只在某一种模式出现的元素。另一侧彻底隐藏, 本侧保持它自己的 display (因此不写 display 值) */
html:not([data-mode="mobile"]) .gy-mob-only { display: none !important; }
html[data-mode="mobile"] .gy-desk-only { display: none !important; }

/* 基线样式表按 960px 定宽排版, 手机排版必须把这些写死的宽度放开, 否则整页横向滚动。
   旧的 style_mobile.css 是整张替换 style.css 的, 不需要覆盖这些值; 现在两份样式叠加加载,
   凡是我在 style.css 里搜到的定宽都得在这里顶掉一遍。 */
html[data-mode="mobile"] .header-wrap,
html[data-mode="mobile"] .main-wrap,
html[data-mode="mobile"] .footer-wrap { min-width: 0; }
html[data-mode="mobile"] .main,
html[data-mode="mobile"] .main-box,
html[data-mode="mobile"] .home-box-list,
html[data-mode="mobile"] .item-content,
html[data-mode="mobile"] .item-content2,
html[data-mode="mobile"] .footer { width: auto; }

/* 单列布局: 正文占满, 侧栏不再浮在右边而是排到正文之后 (DOM 顺序本就是正文在前) */
html[data-mode="mobile"] .main-content { float: none; width: 100%; }
html[data-mode="mobile"] .main-sider { float: none; width: 100%; }
/* 宽屏(平板 / 桌面强制手机排版)下正文列与侧栏限宽居中:
   否则翻页按钮、评论框、侧栏块全被拉成整屏, 既丑也没法读 */
html[data-mode="mobile"] .main-content,
html[data-mode="mobile"] .main-sider {
  max-width: 760px; margin-left: auto; margin-right: auto;
}

/* 侧栏在小屏上是"正文之后的一堆块", 外观与手机端正文块一致: 去掉阴影与贴边空隙 */
html[data-mode="mobile"] .main-sider .sider-box {
  border-radius: 0; box-shadow: none; margin-bottom: 10px; border-bottom: 2px solid var(--border-box);
}
html[data-mode="mobile"] .main-sider .sider-box-title {
  border-radius: 0; box-shadow: none; padding: 10px; margin-bottom: 0;
}
html[data-mode="mobile"] .main-sider .sider-box-content { padding: 10px 12px; margin-bottom: 0; }
/* 链接 chip: 旧的 float 排布在宽屏手机上散成一行, 改 flex 换行并收成胶囊形 */
html[data-mode="mobile"] .main-sider .sider-box-content .btn { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-mode="mobile"] .main-sider .sider-box-content .btn a { float: none; margin: 0; padding: 5px 12px; border-radius: 999px; }
/* 长篇的章节目录可达数百章, 手机上限高在盒内滚动, 不把侧栏撑成一堵墙 */
html[data-mode="mobile"] .main-sider .sider-box-chapters .btn { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 顶栏: 手机上贴顶吸住, 下滑收起、上滑恢复 (状态类 .header-hidden 由 layout 脚本切换) */
html[data-mode="mobile"] .site-header { position: sticky !important; top: 0; }

/* 设置面板是 fixed 居中的, 而带 transform 的祖先会变成它的包含块 ——
   顶栏"下滑收起"正是用 transform 实现的, 所以面板打开期间必须把顶栏的 transform 清掉,
   否则面板会跟着顶栏跑、不再相对视口居中。 */
html[data-mode="mobile"] body.settings-open .site-header {
  transform: none !important;
  transition: none !important; /* 否则收起中的那一帧仍会把面板带偏 */
}

/* 顶栏收紧到手机高度与间距 (桌面标记里的 Tailwind h-16 是 64px, 手机排版用 48px) */
html[data-mode="mobile"] .site-header .container {
  height: 48px; padding-left: 12px; padding-right: 12px; gap: 8px;
}
html[data-mode="mobile"] .site-header .text-2xl { font-size: 1.125rem; line-height: 1.5rem; }
html[data-mode="mobile"] .site-header .items-center.gap-3 { gap: 0.25rem; }

/* 正文块在手机上贴边: 去掉桌面那套圆角与阴影, 只留一条分隔线 (与旧手机版正文一致) */
html[data-mode="mobile"] .main-box {
  border-radius: 0; box-shadow: none; margin-bottom: 10px;
}

/* 列表页标题: 窄屏允许两行, 不用一行截断 (桌面一行 truncate 更整齐);
   字号也别再吃手机端基线 h1 的 1.5rem(24px) —— 与正文 1rem 拉开一档就够了,
   否则标题相对元信息(0.875rem)大得失衡。rem 单位, 跟着"字体大小"根字号缩放。 */
html[data-mode="mobile"] .gy-list-title {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  font-size: 1.125rem; line-height: 1.45;
}

/* 章节目录: 桌面是自适应多列网格, 手机上收成单列长列表 */
html[data-mode="mobile"] .novel-chapter-grid { grid-template-columns: 1fr; }

/* 列表项右侧的文字块: 基线样式写死 466px, 手机上必须跟着容器收窄 */
html[data-mode="mobile"] .item-content2 { width: auto; }

/* 小说章节页: 手机上顶栏标题居中、翻页按钮放大成整行触控目标 */
html[data-mode="mobile"] .chapter-topnav { font-size: 0.8125rem; }
html[data-mode="mobile"] .chapter-nav { gap: 8px; }
html[data-mode="mobile"] .chapter-nav a,
html[data-mode="mobile"] .chapter-nav span {
  flex: 1 1 0; text-align: center; padding: 8px 4px; border-radius: 4px; font-size: 0.8125rem;
  white-space: nowrap; /* 窄屏下 "上一章" 曾被挤成两行竖排 */
  background-color: var(--bg-button); border: 1px solid var(--border-button); color: var(--text-primary);
}