/* ══════════════════════════════════════════════════════════════
   精武堂 · 全站样式表（版式基准：新版移动版 newjwt/css/pgconvert3.css）

   ⚠️ 版式基准已于第 21 轮切换：**新版移动版**（jwt.52youxi.net/newjwt），
   不再是旧版纯文字站（36.138.103.18:39999）。老板确认新版在手机和 PC 上都更好看。

   新版原文基线固化在 docs/reference/精武堂新版移动版基线/（pgconvert3.css / index.html），
   本文件以它为第一来源，逐条对应：

     新版原文                                 → 本文件
     body{padding:4px;margin:0;               → body
          background-image:url(/newjwt/image/bj/bj3.jpg);
          font-size:18px}
     #footer{font-size:10px;padding:5px;      → #footer
             background:#E3EEF8;
             border-top:1px solid #9FC6EC}
     a:link{color:#1e5494;display:inline-block;margin:3px 4px}
     a:visited{color:#800080}                 → a:visited
     a:hover,a:active,a:focus{color:#FFFFFF;  → a:hover,a:active,a:focus
                              background:#1e5494}
     a{text-decoration:underline;color:#004299}
     form{margin:0;padding:0;display:inline-block}
     img{border:0}
     .emotion / .emoji（表情图标）            → .emotion / .emoji

   本文件相对新版新增的部分（全部有注释说明，且不影响新版任何规则）：
     · .container / .content —— 我方骨架原有的容器层（.header 紫色渐变条 + marquee
       已于第 21 轮按新版删除，公告改为正文块）。
       其中 .container 的 max-width 从 4500px 收到 **520px**，
       这是 PC 端「一行字拉满全屏」崩版的直接根因；520px 后 PC 为居中窄栏，与手机观感一致。
     · 工具类（.message/.hint/.err/.ok/.panel/.hd/.tabbar/.tb/.list/.chatline/.ts/#jwt_toast）
       这些 class 在全站 300 个页面的 HTML 里被大量使用，属既有事实，不能删；
       一律保持零装饰（无卡片/圆角/阴影），不破坏新版纯文字流。
     · @media 响应式块 —— 保留并继续生效，窄屏防溢出。
   ══════════════════════════════════════════════════════════════ */

/* ── 新版移动版原文（pgconvert3.css）──────────────────── */
body {
  padding: 4px;
  margin: 0;
  background-image: url(../img/bj/bj3.jpg);
  font-size: 18px;
}

/* 新版页脚：浅蓝底 #E3EEF8 + 上边框 #9FC6EC + 10px 小字 */
#footer {
  font-size: 10px;
  padding: 5px;
  background: #E3EEF8;
  border-top: 1px solid #9FC6EC;
}
#footer a { color: #0051A4; }

a:link {
  color: #1e5494;
  display: inline-block;
  margin: 3px 4px 3px 4px;
}

a:visited { color: #800080; }

a:hover, a:active, a:focus {
  color: #FFFFFF;
  background: #1e5494;
}

a {
  text-decoration: underline;
  color: #004299;
}

form {
  margin: 0;
  padding: 0;
  display: inline-block;
}

img { border: 0; }

/* 新版表情（插入表情按钮 + 表情选择面板） */
.emotion { background: url(../img/icon.gif) no-repeat 2px 2px; padding-left: 20px; cursor: pointer; }
.emotion:hover { background-position: 2px -28px; }
.emoji { margin-top: 4px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
.emoji table td { padding: 0; width: 48px; }
.emoji table td img { cursor: pointer; border: 1px #fff solid; }
.emoji table td img:hover { border: 1px #0066cc solid; }

/* ── 我方骨架容器（新版没有三层容器，但既有 HTML 依赖，保留）───
   .container 的 max-width：新版无此概念；我方从 4500px 改为 520px，
   理由：4500px 在桌面下把容器拉到整个屏幕宽，固定 px 字号被拉成一行长字（PC 崩版）。
   520px 与新版移动版的手机观感一致，桌面下为居中窄栏。
   ⚠️ 第 21 轮起贴新版：原 .header 紫色渐变条 + marquee 已删除（新版无此结构），
   公告改为正文块（lib/ui.js 的 topBar()）。.header/.marquee 规则一并移除。 */
.container {
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
}

.content { padding: 5px; min-height: 400px; }

/* 旧的 .footer flex 社交条 + .social-btn SVG 已随第 21 轮「完全贴新版」删除：
   foot() 现在输出 #footer（见下方新版页脚规则），全站已无 .footer/.social-btn 调用方。 */

.alert { padding: 15px; border-radius: 8px; margin: 10px 0; background: #fff8e1; border-left: 4px solid #ffc107; }
.alert h3 { color: #e65100; margin-bottom: 8px; }

/* ── 既有工具类：零装饰，保持新版纯文字流 ─────────────────────
   原站新版页面里同样没有卡片、没有彩色标题，全部是纯文字 + <br> 换行；
   这些 class 是全站既有 HTML 的事实依赖，一律不加视觉层。 */
.message {
  margin-bottom: 6px;
  word-wrap: break-word;
  padding: 2px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  border-left: 8px solid #3498db;
  animation: fadeIn .1s ease-out;
  position: relative;
}
.timestamp { color: #FF851B; margin-right: 1px; font-weight: normal; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.title { font-weight: 700; }
.hint { color: #888; font-size: 13px; }
.err { color: #c00; }
.ok { color: #0a7a3d; }
table { border-collapse: collapse; }
td, th { padding: 2px 8px; text-align: left; vertical-align: top; }
.chatline { margin-bottom: 3px; }
.ts { color: #FF851B; }

/* 新版正文 18px；div 显式继承，避免某些 UA 默认 16px 把版式压扁 */
div { font-size: 18px; }

/* 表单控件：原站未自定义 button/submit，用浏览器默认外观。
   输入框保留最小边框（不影响按钮对齐基准）。 */
input[type=text], input[type=password], input[type=number], select { padding: 1px 2px; font-size: 16px; }
input[type=submit], button { font-size: 16px; font-family: inherit; cursor: pointer; vertical-align: middle; }
img { vertical-align: middle; border: 0; }

/* 兼容类：不加任何视觉装饰，保持文字流 */
.panel { display: inline; max-width: 100%; }
.hd { font-weight: 400; color: inherit; }
.tabbar { margin: 4px 0; }
.tabbar a, .tabbar b { margin-right: 6px; }
.tabbar b { color: #6A0DAD; }
.tb td, .tb th { border: 0; }
.list div { padding: 0; }

/* 新版页脚的淡入动画（新版 HTML 里 <p class="txt-fade">） */
.txt-fade { animation: txtFade .6s ease-out both; }
@keyframes txtFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* 非阻塞提示条（替代 alert 弹窗） */
#jwt_toast {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  max-width: 82%;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  z-index: 99999;
  display: none;
  text-align: center;
  word-break: break-all;
}

/* ── 响应式：窄屏防溢出（新版同样需要，非我方发明）──────────
   表格横向滚动、图片 max-width:100%、输入框不超宽。 */
@media (max-width: 640px) {
  .container { max-width: 100%; }
  .content { padding: 4px; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { padding: 2px 4px; white-space: nowrap; }
  table select { max-width: 150px; }
  img { max-width: 100%; height: auto; }
  input[type=text], input[type=password], input[type=number], select { max-width: 100%; }
  form { display: inline; }
  .medal-grid img, .totem-grid img { display: inline-block; }
}