/* ============================================================
   base_mobile.html 外壳样式：头部返回条 + flash 横幅 + 老内容归一化
   Token 全部来自 tanglu.css；暗色用 [data-theme="dark"] 变体。
   ============================================================ */

.mb-header { display: flex; align-items: stretch; min-height: 52px;
  background: linear-gradient(180deg, var(--paper-warm), var(--paper));
  border-bottom: 1px solid var(--border-wash); }
.mb-back { display: flex; align-items: center; gap: 8px; padding: 0 16px 0 8px;
  min-height: 52px; text-decoration: none; color: var(--ink); flex: 1; min-width: 0; }
.mb-back:active { background: var(--red-wash); }
.mb-back-arrow { font-size: 26px; line-height: 1; color: var(--ink-light);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin-left: -8px; }
.mb-title { font-family: var(--serif); font-size: 17px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-right { display: flex; align-items: center; padding-right: 14px; }

.mb-flash { margin: 10px 0 4px; padding: 11px 14px; border-radius: var(--radius-lg);
  font-size: 13px; border: 1px solid var(--border-wash); background: #fff; color: var(--ink-light);
  white-space: pre-line; }
.mb-flash-success { border-color: var(--green-bamboo); background: var(--green-wash); color: var(--green-bamboo); }
.mb-flash-error { border-color: var(--red-seal); background: var(--red-wash); color: var(--red-seal); }
.mb-flash-info { border-color: var(--gold); background: var(--gold-wash); color: var(--gold); }

/* 老内容归一化：图片不溢出、表格可横滑、长文不撑破 */
.page-body img { max-width: 100%; height: auto; }
.page-body table { display: block; overflow-x: auto; max-width: 100%; }
.page-body pre { white-space: pre-wrap; word-break: break-word; }

/* 老页面常用元素换肤：链接收敛到品牌红（按钮类除外，避免盖住按钮文字色）。
   :where() 归零权重：组件/模板自己的链接色（如菜单墨色）优先，正文裸链接仍落品牌红 */
:where(.page-body) a:where(:not(.btn-red):not(.btn-ghost):not(.btn-ink):not(.btn-bamboo):not(.btn):not(.back)) { color: var(--red-seal); }

/* 全站表单控件 Token（与 .form-field .fi 一致，供老页面直接引用） */
.mb-input, input.mb-input, textarea.mb-input, select.mb-input {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-md);
  border: 1px solid var(--border-wash); background: var(--paper);
  font-size: 14px; color: var(--ink); font-family: var(--sans); }
.mb-input:focus { outline: none; border-color: var(--red-seal); }

[data-theme="dark"] .mb-header { background: linear-gradient(180deg, #232019, #1C1C1E);
  border-bottom-color: #3A362F; }
[data-theme="dark"] .mb-back { color: #E8E4DC; }
[data-theme="dark"] .mb-back-arrow { color: #9A9590; }
[data-theme="dark"] .mb-flash { background: #26241F; border-color: #3A362F; color: #B8B2AB; }
[data-theme="dark"] .mb-flash-success { background: rgba(74,124,89,0.16); color: #7FB08C; border-color: #3E5B48; }
[data-theme="dark"] .mb-flash-error { background: rgba(184,84,80,0.16); color: #D4766F; border-color: #5C3A38; }
[data-theme="dark"] .mb-flash-info { background: rgba(185,143,62,0.14); color: #C9A45C; border-color: #57492E; }
[data-theme="dark"] .mb-input { background: #1C1C1E; border-color: #3A362F; color: #E8E4DC; }