/* ── header 内容 ── */
header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--red-imp);
  font-weight: 700;
  /* v0.7.5:朱砂双线下划,加点宫廷碑文感 */
  position: relative;
  padding-bottom: 4px;
}
header h1::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--red-imp) 20%, var(--red-imp) 80%, transparent 100%);
  box-shadow: 0 -3px 0 -2px var(--red-imp);  /* 双线效果 */
}
header .turn-info {
  color: var(--ink-soft);
  font-size: 14px;
}

/* v0.7.2:皇嗣总览(挪到左面板,原 header 槽已删) */
.children-summary .cs-empty {
  color: var(--ink-soft);
  opacity: 0.55;
  font-style: italic;
  font-size: 12px;
  padding: 2px 0;
}
.children-summary .cs-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.children-summary .cs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
  padding: 2px 4px;
  border-radius: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.children-summary .cs-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
}
.children-summary .cs-text {
  flex: 1;
  color: var(--ink-soft);
}
.children-summary .cs-num {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
  min-width: 16px;
  text-align: right;
}
.children-summary .cs-row-lost {
  color: var(--red-imp);
  border-color: rgba(139,26,26,.35);
}
.children-summary .cs-row-lost .cs-text,
.children-summary .cs-row-lost .cs-num {
  color: var(--red-imp);
}
/* v0.7.4:削宗(##1 三阿哥事件后)— 灰底斜杠示意"作废" */
.children-summary .cs-row-expel {
  color: var(--ink-mute);
  border-style: dashed;
  background: var(--bg-paper);
}
.children-summary .cs-row-expel .cs-text,
.children-summary .cs-row-expel .cs-num {
  color: var(--ink-mute);
  text-decoration: line-through;
}
/* 削宗皇嗣卡片(child_mourn 复用 + 灰底斜体) */
.child-mourn.child-expelled {
  background: var(--bg-soft);
  border-left-color: var(--ink-mute);
  font-style: italic;
}
.child-mourn.child-expelled .child-mourn-name { color: var(--ink-mute); }
.children-summary .cs-row-warn {
  background: var(--red-imp);
  border-color: var(--red-imp);
  animation: cs-pulse 2s ease-in-out infinite;
}
.children-summary .cs-row-warn .cs-icon,
.children-summary .cs-row-warn .cs-text,
.children-summary .cs-row-warn .cs-num {
  color: #fff;
}
@keyframes cs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

/* ── 左面板:状态 ── */
.stat-block { margin-bottom: 16px; }
.stat-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.stat-label .stat-value {
  color: var(--ink);
  font-weight: bold;
  letter-spacing: 1px;
}
/* v0.7.5:HP/SAN/POL 字母标签 — 灰底小字,贴在中文名旁 */
.stat-label .stat-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
  font-family: 'Consolas', 'Courier New', monospace;
}
.stat-bar {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.stat-bar-fill {
  height: 100%;
  transition: width .3s ease;
}
.stat-bar-fill.hp { background: var(--red-imp); }
.stat-bar-fill.san { background: var(--purple); }
.stat-bar-fill.gold { background: var(--gold); }
.stat-bar-fill.polpoints { background: #c9a227; }

.panel-title {
  font-size: 14px;
  color: var(--red-imp);
  padding-bottom: 6px;
  margin: 16px 0 10px 0;
  letter-spacing: 4px;
  font-weight: 700;
  /* v0.7.5:朱砂双线尾,左右带 ◆ 菱印小点缀 */
  position: relative;
  text-align: center;
  /* v0.7.15:防"宫闱秘事 X / Y"的进度数字被挤到第二行 */
  white-space: nowrap;
}
.panel-title::before, .panel-title::after {
  content: '◆';
  display: inline-block;
  margin: 0 8px;
  color: var(--red-imp);
  font-size: 8px;
  vertical-align: middle;
  opacity: .7;
}
.panel-title {
  border-bottom: 1px solid var(--red-imp);
  box-shadow: 0 2px 0 -1px var(--red-imp);  /* 双线效果 */
}

.log-list {
  font-size: 12px;
  color: var(--ink-soft);
  max-height: 280px;
  overflow-y: auto;
  line-height: 1.7;
}

/* v0.7.6:宫闱秘事录(canon 事件时间轴) */
.canon-timeline {
  font-size: 12px;
  color: var(--ink-soft);
  max-height: 180px;
  overflow-y: auto;
  line-height: 1.6;
  margin-bottom: 12px;
}
.canon-timeline .canon-item {
  padding: 2px 0;
  border-bottom: 1px dotted var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.canon-timeline .ct-turn {
  color: var(--red-imp);
  margin-right: 4px;
}
.canon-timeline .ct-name {
  color: var(--ink);
  font-weight: 500;
}
.canon-timeline .ct-choice {
  color: var(--ink-mute);
  font-size: 11px;
  margin-left: 2px;
}
.panel-title .ct-progress {
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: normal;
  margin-left: 6px;
  letter-spacing: normal;   /* 不吃 panel-title 的 4px 间距,"X / Y" 挤紧 */
}
.log-list .log-item {
  padding: 2px 0;
  border-bottom: 1px dotted var(--border);
}
.log-list .log-turn {
  color: var(--red-imp);
  margin-right: 4px;
}

/* ── 中央:翻牌子 ── */
.center-title {
  font-size: 18px;
  color: var(--red-imp);
  text-align: center;
  letter-spacing: 8px;
  margin: 4px 0 10px 0;
  font-weight: 700;
  /* v0.7.5:左右双横,中央朱砂题字感 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.center-title::before, .center-title::after {
  content: '';
  flex: 0 0 60px;
  height: 1px;
  background: var(--red-imp);
  box-shadow: 0 3px 0 -1px var(--red-imp);  /* 双线 */
  opacity: .55;
}
.center-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  margin-bottom: 16px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.pick-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px 7px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.pick-card:hover:not(.disabled) {
  background: #fff8e8;
  border-color: var(--red-imp);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(139,26,26,.15);
}
/* v0.7.1:disabled 改用文字色变浅而非整体 opacity,保留内嵌按钮(晋位/惩戒/详情)可读 */
.pick-card.disabled {
  cursor: not-allowed;
  background: #ebe2c8;
}
.pick-card.disabled .name,
.pick-card.disabled .rank,
.pick-card.disabled .delta { color: var(--ink-mute); }
.pick-card .name {
  font-weight: bold;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 1px;
}
/* v0.7.1:可点姓名(详情入口),hover 朱色提示 */
.pick-card .name-link { cursor: pointer; }
.pick-card .name-link:hover { color: var(--red-imp); text-decoration: underline; }
/* v0.7.6:翻牌区妃语台词(三档:怨 / 平 / 深情),小字浅色斜体 */
.pick-card .pick-quote {
  font-size: 0.82em;
  color: var(--ink-mute, #888);
  font-style: italic;
  margin: 1px 0;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v0.7.6:晋/惩戒 按钮 — 绝对定位到卡片右下角,不占独立行,卡片整体仍压扁 */
.pick-card .card-actions {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* 给 delta 行留出按钮宽度,防文字被盖 */
.pick-card .delta {
  padding-right: 90px;
}
.pick-card .card-actions .punish-wrap {
  margin-top: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  line-height: 1;
}
/* v0.7.1:打开惩戒下拉时,把整个 pick-card 提到上层防被兄弟卡片盖住 */
.pick-card:has(.punish-menu) {
  z-index: 50;
}
.pick-card .rank {
  color: var(--ink-soft);
  font-size: 12px;
  margin-left: 4px;
}
.pick-card .tem {
  display: inline-block;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 2px;
  font-size: 11px;
  background: var(--bg-paper);
  border: 1px solid var(--border);
}
.pick-card .affinity {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
}
.pick-card .affinity.match { color: var(--green); }
.pick-card .affinity.neutral { color: var(--ink-mute); }
.pick-card .affinity.clash { color: var(--red-imp); }
.pick-card .delta {
  margin-top: 1px;
  font-size: 11px;
  color: var(--ink-soft);
}
/* v0.7.1:帝宠图标(右上角,克制版彩色 emoji + 水墨化滤镜) */
/* 滤镜思路:去饱和压亮度让黄底变墨色,saturate+hue-rotate 把暖色拉向朱砂红,
   低档暗墨,高档朱红,模拟"宣纸上墨笔与朱印的呼应" */
.pick-card .intimacy-corner {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 16px;
  line-height: 1;
  cursor: help;
  /* 通用基底:稍去饱和 + sepia 偏暖 */
  filter: grayscale(0.4) sepia(0.45) brightness(0.92);
}
.pick-card .intimacy-corner.tier-cold    { filter: grayscale(0.85) brightness(0.7)  contrast(1.1); }
.pick-card .intimacy-corner.tier-cool    { filter: grayscale(0.65) brightness(0.82) sepia(0.2); }
.pick-card .intimacy-corner.tier-neutral { filter: grayscale(0.55) sepia(0.4)  brightness(0.88); }
.pick-card .intimacy-corner.tier-warm    { filter: sepia(0.7)  hue-rotate(-12deg) saturate(1.3); }
.pick-card .intimacy-corner.tier-hot     { filter: sepia(0.85) hue-rotate(-22deg) saturate(1.7) brightness(0.95); }

/* v0.7.5:位份 tier 视觉(后/皇贵妃/贵妃/妃)— 边框 + 渐变底色分层,无角标(姓名+位份已自带辨识) */
.pick-card-empress {                /* 皇后 — 朱砂边 + 暖底 + 朱色名 */
  background: linear-gradient(180deg, #f5dcd2 0%, #faf2e2 18%);
  border-color: var(--red-imp);
  border-width: 2px;
  padding: 9px 11px;
  box-shadow: 0 1px 3px rgba(139,26,26,.18);
}
.pick-card-empress .name { color: var(--red-imp); }

.pick-card-imperial-noble {         /* 皇贵妃 — 暗金边 + 金底 */
  background: linear-gradient(180deg, #efe4c4 0%, #faf2e2 22%);
  border-color: #b08840;
  border-width: 2px;
  padding: 9px 11px;
  box-shadow: 0 1px 3px rgba(176,136,64,.18);
}

.pick-card-noble {                  /* 贵妃 — 紫晕边 */
  background: linear-gradient(180deg, #e7dceb 0%, #faf2e2 25%);
  border-color: #7a4e7a;
  border-width: 2px;
  padding: 9px 11px;
}

.pick-card-consort {                /* 妃 — 朱砂半透细边 */
  border-color: rgba(139,26,26,.5);
  border-width: 2px;
  padding: 9px 11px;
}
/* v0.7.1:.status-tag 删除 — 状态信息已合并到 delta 行,腾出右上给帝宠图标 */
.pick-card .faction-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.other-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.opt-btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  transition: all .2s;
}
.opt-btn:hover {
  background: #fff8e8;
  border-color: var(--red-imp);
}
.opt-btn .opt-name {
  font-weight: bold;
  letter-spacing: 1px;
}
.opt-btn .opt-delta {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.section-divider {
  text-align: center;
  color: var(--ink-mute);
  font-size: 12px;
  margin: 14px 0 10px 0;
  letter-spacing: 6px;
  /* v0.7.5:横线 + 中央文字 + 横线,代替原 ── 文字 ── */
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-divider::before, .section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

/* ── 右面板:Tab 切换 ── */
.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 4px;
  font-family: inherit;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .2s;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active {
  color: var(--red-imp);
  border-bottom-color: var(--red-imp);
  font-weight: bold;
}

/* ── 右面板:嫔妃 Tab ── */
/* v0.7.1:在位嫔妃已迁至翻牌区,本 Tab 仅留导航提示 + 已出局区 */
.tab-hint {
  font-size: 12px;
  color: var(--ink-mute);
  padding: 6px 8px;
  margin-bottom: 10px;
  border-left: 2px solid var(--border);
  background: var(--bg-soft);
  border-radius: 2px;
}
.faction-group {
  margin-bottom: 14px;
}
.faction-group-title {
  font-size: 13px;
  color: var(--red-imp);
  border-left: 3px solid var(--red-imp);
  padding-left: 6px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
/* v0.7.1:.conc-row 系列样式已废 — renderConcRow 删除,改用 .pick-card */

/* 晋位按钮(Phase 2.5)*/
.conc-promo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 11px;
}
.conc-promo-progress {
  color: var(--ink-mute);
  font-family: monospace;
}
/* v0.7.1:晋位 / 惩戒按钮统一 box 尺寸(height + inline-flex 居中,避免基线漂移) */
.conc-promo-btn {
  background: var(--red-imp);
  color: var(--bg-paper);
  border: 1px solid var(--red-imp);
  padding: 0 8px;
  height: 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .2s;
}
.conc-promo-btn.ready:hover { background: #6b1414; border-color: #6b1414; }
.conc-promo-btn.disabled {
  background: var(--bg-soft);
  color: var(--ink-mute);
  border-color: var(--border);
  cursor: not-allowed;
}

/* 晋位确认弹窗辅助样式 */
.modal-box-small {
  max-width: 380px;
  padding: 20px 24px;
}
.modal-btn-secondary {
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--border);
  margin-right: 8px;
}
.modal-btn-secondary:hover { background: var(--bg-paper); }
.promo-target { color: var(--red-imp); letter-spacing: 1px; }
.promo-detail { color: var(--ink-soft); font-size: 13px; }
.promo-cost   { color: var(--gold);    font-size: 13px; }

/* ── 妃嫔出局机制(v0.5.7)── */
.punish-wrap {
  position: relative;
  margin-top: 4px;
  text-align: right;
}
.punish-trigger {
  background: transparent;
  color: var(--red-imp);
  border: 1px solid var(--red-imp);
  padding: 0 8px;
  height: 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  opacity: .55;
}
.punish-trigger:hover { opacity: 1; background: rgba(139,26,26,.06); }
.punish-trigger.active {
  background: var(--red-imp);
  color: var(--bg-paper);
  opacity: 1;
}
.punish-trigger.disabled {
  border-color: var(--border);
  color: var(--ink-mute);
  cursor: not-allowed;
  opacity: .35;
}
.punish-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--red-imp);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(60,40,10,.15);
}
.punish-opt {
  background: transparent;
  color: var(--red-imp);
  border: 1px solid var(--red-imp);
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
}
.punish-opt:hover { background: var(--red-imp); color: var(--bg-paper); }
.punish-execute {
  background: rgba(139,26,26,.08);
  font-weight: bold;
}

/* 已出局折叠区 */
.outcast-section {
  margin-top: 14px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.outcast-header {
  cursor: pointer;
  user-select: none;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 2px;
  transition: color .15s;
}
.outcast-header:hover { color: var(--ink-soft); }
.outcast-toggle { display: inline-block; width: 12px; }
.outcast-title  { margin-right: 4px; }
.outcast-count  { color: var(--red-imp); }
.outcast-body {
  padding: 4px 0 6px 14px;
}
.outcast-subtitle {
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: 2px;
  margin: 6px 0 4px;
  font-style: italic;
}
.outcast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  margin-bottom: 3px;
  border-left: 2px solid var(--border);
  background: rgba(80,65,40,.03);
  font-size: 11px;
}
.outcast-banished { border-left-color: var(--purple); }
.outcast-dead     { border-left-color: var(--red-imp); opacity: .75; }
/* v0.7.4:已离宫 — 永久退池(嫁出/远适等),灰色斜体不带赦免 */
.outcast-leftpool { border-left-color: var(--ink-mute); opacity: .7; font-style: italic; }
.outcast-row-info { flex: 1; }
.outcast-name {
  color: var(--ink);
  font-weight: bold;
  margin-right: 6px;
}
.outcast-meta {
  color: var(--ink-mute);
  font-size: 10px;
}
.outcast-pardon-btn {
  background: var(--gold);
  color: var(--bg-paper);
  border: none;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 10px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 1px;
}
.outcast-pardon-btn:hover { background: #8a6a08; }

/* 惩戒确认弹窗 */
.modal-box-punish { border: 2px solid var(--red-imp); }
.modal-title-punish { color: var(--red-imp); }
.modal-btn-danger {
  background: var(--red-imp);
  color: var(--bg-paper);
  font-weight: bold;
}
.modal-btn-danger:hover { background: #6b1414; }
.punish-cost-list {
  color: var(--gold);
  font-size: 12px;
  display: block;
  margin-top: 6px;
}
.punish-side-effects {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(139,26,26,.06);
  border-left: 3px solid var(--red-imp);
  color: var(--red-imp);
  font-size: 11px;
  line-height: 1.6;
}

/* 事件系统(Phase 3a)*/
.event-lock-banner {
  background: var(--red-imp);
  color: var(--bg-paper);
  text-align: center;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 2px;
  letter-spacing: 2px;
  font-size: 13px;
  animation: pulse 1.5s ease-in-out infinite;
}
.modal-box-event {
  max-width: 760px;          /* v0.7.6:580 → 760,叙事文 + 选项 + stats 行更舒展 */
  border-color: var(--red-imp);
  border-width: 3px;
}
/* v0.7.10+:事件 banner — 比 ending banner 扁(9/4 vs 3/2),给 narrative + choices 留空间。
   裁掉图原生底部 35% 米色留白(事件 modal title 走 .modal-title 不叠图),
   object-position 偏上保留画面核心叙事元素。img.onerror 时整 banner 隐藏,回退原版形态。
   v0.7.13:5/2 (裁 40%) → 2/1 (裁 25%)。原比例多裁 5% 啃到人物下身;现行比例放出更多画面,
   留 10% 米色留白渐入下方 narrative 区,过渡更自然。 */
.event-banner {
  position: relative;
  margin: -28px -34px 14px -34px;     /* 反向负 margin 顶满 modal-box 内 padding */
  overflow: hidden;
  background: #1a0808;                 /* 图加载前/无图占位深色 */
  width: auto;
  aspect-ratio: 2 / 1;                 /* 比 ending(3/2)扁,裁 25% 露出更多画面 */
}
.event-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;         /* 顶对齐:保留图的上 65% 核心叙事,裁掉底部留白(事件 modal title 走 .modal-title 不需图叠层) */
  display: block;
}
.event-banner.no-img {
  display: none;                       /* 无图直接消失,modal 回到无 banner 原版形态 */
}
/* banner 的负 margin 顶满了 modal-box 的 padding,会盖住 layout.css:96 处定义的左上/右上角花。
   补救:在 banner 紧邻的 modal-title 行左右两端贴同一对回纹角花(SVG 复用 layout.css 同款)。
   仅在有 banner(非 .no-img)时启用,无图态下原 modal 角花不被遮,无需此补救。 */
.modal-box-event .event-banner:not(.no-img) + .modal-title {
  position: relative;
}
.modal-box-event .event-banner:not(.no-img) + .modal-title::before,
.modal-box-event .event-banner:not(.no-img) + .modal-title::after {
  content: '';
  position: absolute;
  top: -8px;       /* 上移贴近 .event-banner 下沿,顶着标题区顶部 */
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
}
.modal-box-event .event-banner:not(.no-img) + .modal-title::before {
  left: -30px;     /* modal-box padding-left=34px,原角花距 box 边 4px;-30 让其与左下角花同 X */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M2 2h14M2 2v14M5 5h10v10' fill='none' stroke='%238b1a1a' stroke-width='1' stroke-linecap='square'/><circle cx='5' cy='5' r='1.2' fill='%238b1a1a'/></svg>");
}
.modal-box-event .event-banner:not(.no-img) + .modal-title::after {
  right: -30px;    /* 镜像:与右下角花同 X */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M16 2H2M16 2v14M13 5H3v10' fill='none' stroke='%238b1a1a' stroke-width='1' stroke-linecap='square'/><circle cx='13' cy='5' r='1.2' fill='%238b1a1a'/></svg>");
}
.event-narrative {
  background: var(--bg-soft);
  padding: 14px 18px;
  border-left: 3px solid var(--red-imp);
  border-radius: 2px;
  margin-bottom: 18px;
  line-height: 2;
  font-size: 14px;
  text-align: justify;
}
.event-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-choice {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  font-family: inherit;
  color: var(--ink);
  transition: all .2s;
}
.event-choice:hover {
  background: #fff8e8;
  border-color: var(--red-imp);
  transform: translateX(2px);
}
.event-choice-label {
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
  color: var(--red-imp);
}
.event-choice-desc {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
/* v0.7.6:选项数值后果(HP/SAN/帝宠/圣心录)— 单独成行,斜体浅色,语气抽离剧情 */
.event-choice-stats {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-mute, #888);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* ── 选秀 multi-pick modal(v0.7.3)── */
.modal-box-xuanxiu {
  max-width: 760px;
  border-color: var(--gold);
  border-width: 3px;
}
.xuanxiu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.xuanxiu-card {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.xuanxiu-card:hover {
  background: #fff8e8;
  border-color: var(--red-imp);
}
.xuanxiu-card-picked {
  background: #fff3d4;
  border-color: var(--gold);
  border-width: 2px;
  padding: 9px 11px;
}
/* v0.7.5:钦点 — 朱砂底,不可取消 */
.xuanxiu-card-forced {
  background: #f8e3dd;
  border-color: var(--red-imp);
  border-width: 2px;
  padding: 9px 11px;
  cursor: default;
}
.xuanxiu-card-forced:hover {
  background: #f8e3dd;
  border-color: var(--red-imp);
}
.xuanxiu-card-forced .xuanxiu-card-mark {
  color: var(--red-imp);
  font-weight: bold;
}
.xuanxiu-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.xuanxiu-card-name {
  font-weight: bold;
  font-size: 15px;
  color: var(--red-imp);
  letter-spacing: 2px;
}
.xuanxiu-card-fac {
  font-size: 11px;
  color: var(--ink-soft);
}
.xuanxiu-card-tags {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.xuanxiu-card-bg {
  font-size: 11px;
  color: var(--ink);
  line-height: 1.5;
  font-style: italic;
  opacity: 0.8;
}
.xuanxiu-card-mark {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1px;
  background: rgba(247, 240, 221, 0.9);
  padding: 1px 4px;
  border-radius: 2px;
}
/* v0.7.5+:终幕「国史档案」recap */
.modal-box-ending {
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}

/* v0.7.9+:结局弹窗 banner — 图压标题区,与启动页风格语言一致 */
/* 默认假设有图(.ending-banner);img.onerror 时切 .no-img 降级到纯文字标题 */
.ending-banner {
  position: relative;
  margin: -28px -34px 16px -34px;   /* 反向负 margin 顶满 modal-box 内 padding */
  overflow: hidden;
  background: #1a0808;               /* 图加载前/无图占位深色,与启动页 medium tier 同 */
  width: auto;                       /* 显式 fill 父宽,避免 aspect-ratio 反算压缩 */
  aspect-ratio: 3 / 2;               /* 匹配图原生 1536x1024 比例,不裁切完整呈现 */
}
.ending-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;           /* 小屏触发 max-height 时上下平衡裁切 */
  display: block;
}
/* 文字叠层:不主动遮挡图,只在最底部 ~25% 加保险渐隐衔接米黄正文区 */
.ending-banner-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px 34px 14px 34px;      /* 顶部留 70px 透明段,标题压在图自带的留白区 */
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(247, 240, 221, 0) 0%,
    rgba(247, 240, 221, 0) 65%,      /* 65% 之前完全透明,不挡图 */
    rgba(247, 240, 221, 0.45) 85%,
    var(--bg-paper) 100%
  );
}
.ending-banner-title {
  font-size: 22px;
  color: var(--red-imp);
  letter-spacing: 6px;
  font-weight: bold;
  margin-bottom: 4px;
  text-shadow:
    0 0 10px rgba(247, 240, 221, 0.95),
    0 0 4px rgba(247, 240, 221, 0.85),
    0 1px 2px rgba(247, 240, 221, 0.7);
}
.ending-banner-subtitle {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 2px;
  font-style: italic;
  text-shadow:
    0 0 8px rgba(247, 240, 221, 0.95),
    0 0 3px rgba(247, 240, 221, 0.8);
}

/* 无图降级:回退到原版纯文字标题样式(一次小 reflow,基本不可察) */
.ending-banner.no-img {
  margin: 0 0 16px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  aspect-ratio: auto;
  max-height: none;
}
.ending-banner.no-img .ending-banner-text {
  position: static;
  padding: 0;
  background: none;
}
.ending-banner.no-img .ending-banner-title {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 0;
  text-shadow: none;
}
.ending-banner.no-img .ending-banner-subtitle {
  margin-top: 6px;
  text-shadow: none;
}
.ending-recap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--red-imp);
  box-shadow: 0 -3px 0 -2px var(--red-imp);  /* 双线效果 */
  font-size: 12px;
  color: var(--ink-soft);
}
.er-section-title {
  text-align: center;
  font-size: 14px;
  color: var(--red-imp);
  letter-spacing: 6px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.er-section { margin-bottom: 14px; }
.er-h {
  font-size: 12px;
  color: var(--red-imp);
  letter-spacing: 3px;
  font-weight: 700;
  margin-bottom: 6px;
  padding-left: 6px;
  border-left: 3px solid var(--red-imp);
}
/* 结局缘起 — 此局缘起 */
.er-attribution {
  padding: 8px 12px;
  background: rgba(139, 26, 26, 0.06);
  border-left: 3px solid var(--red-imp);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.7;
}
/* 圣心录(每维一块,带归因子句) */
.er-dims { display: flex; flex-direction: column; gap: 8px; }
.er-dim-row {
  padding: 6px 8px;
  border-bottom: 1px dotted var(--border);
}
.er-dim-row:last-child { border-bottom: none; }
.er-dim-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.er-dim-label  { color: var(--ink); font-weight: 700; min-width: 50px; letter-spacing: 2px; }
.er-dim-phrase { color: var(--ink-soft); flex: 1; }
.er-dim-num    { font-family: 'Cinzel', monospace; color: var(--ink-mute); min-width: 40px; text-align: right; font-size: 11px; }
.er-dim-reason {
  color: var(--ink-mute);
  font-size: 11px;
  font-style: italic;
  margin-top: 2px;
  padding-left: 12px;
  letter-spacing: 1px;
}
/* canon 已触发列表 */
.er-canon-fired-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 6px 8px;
}
.er-canon-fired { color: var(--ink); font-size: 11px; letter-spacing: 1px; }
.er-canon-empty { color: var(--ink-mute); font-style: italic; padding: 4px 8px; }
/* 起居录 */
.er-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.er-act-row { display: flex; justify-content: space-between; padding: 2px 4px; }
.er-act-num { font-family: 'Cinzel', monospace; font-weight: 700; color: var(--ink); }
.er-act-pct { color: var(--ink-mute); font-family: 'Cinzel', monospace; min-width: 40px; text-align: right; }
/* 受宠者 */
.er-top-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--border); }
.er-top-row:last-child { border-bottom: none; }
.er-top-ord { color: var(--red-imp); font-weight: 700; min-width: 30px; }
.er-top-name { color: var(--ink); font-weight: 700; flex: 1; letter-spacing: 1px; }
.er-top-visits { color: var(--ink-mute); font-family: 'Cinzel', monospace; font-size: 11px; }
.er-top-empty { color: var(--ink-mute); font-style: italic; }
/* 派系格局 */
.er-factions { display: flex; flex-direction: column; gap: 4px; }
.er-fac-row { display: flex; align-items: center; gap: 8px; }
.er-fac-name { min-width: 56px; color: var(--ink); }
.er-fac-bar  { flex: 1; height: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.er-fac-fill { height: 100%; background: var(--red-imp); }
.er-fac-pct  { min-width: 40px; text-align: right; font-family: 'Cinzel', monospace; color: var(--ink-mute); font-size: 11px; }
/* 皇嗣 */
.er-children { padding-left: 8px; }
.er-children strong { color: var(--ink); font-family: 'Cinzel', monospace; font-size: 14px; }
/* canon 主线 — 已触发 list 与点评 */
.er-canon-remark {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(139, 26, 26, 0.05);
  border-left: 2px solid var(--red-imp);
  color: var(--ink-soft);
  font-style: italic;
  letter-spacing: 1px;
}

.modal-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg-soft);
}
.modal-btn-disabled:hover { background: var(--bg-soft); }

/* ── 右面板:派系 Tab ── */
.narrative-box {
  background: var(--bg-soft);
  border-left: 3px solid var(--red-imp);
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.7;
}
.narrative-line {
  margin: 2px 0;
}
.faction-bar-row {
  margin-bottom: 10px;
}
.faction-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 3px;
}
.faction-bar-name { font-weight: bold; }
.faction-bar-pct { color: var(--ink-soft); font-family: monospace; }
.faction-bar-track {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.faction-bar-fill { height: 100%; transition: width .3s ease; }
.fill-zhonggong { background: #8b3a3a; }
.fill-taihou    { background: #5a7a8a; }
.fill-nianshi   { background: #c87520; }
.fill-zhenshi   { background: #3a7a5a; }
.fill-sanren    { background: #888; }
.faction-bar-fill.warning { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }
.faction-members {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 3px;
  line-height: 1.5;
}
/* v0.7.3:派系解散 — anchor 赐死后整条褪色,加"已散"小红标 */
.faction-bar-dissolved { opacity: 0.55; }
.faction-bar-dissolved .faction-bar-name { text-decoration: line-through; }
.faction-bar-dissolved .faction-members { font-style: italic; }
.faction-dissolved-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--bg-paper);
  background: var(--red-imp);
  border-radius: 2px;
  vertical-align: 1px;
}

.warning-section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 12px;
}
.warning-section-title {
  font-size: 12px;
  color: var(--red-imp);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.warning-item {
  font-size: 11px;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 2px;
  border-left: 3px solid;
}
.warning-item.red    { background: rgba(139,26,26,.1);  border-color: var(--red-imp); color: var(--red-imp); }
.warning-item.yellow { background: rgba(184,134,11,.1); border-color: var(--gold);    color: #8a6a08; }
.warning-item.green  { background: rgba(90,138,90,.1);  border-color: var(--green);   color: #3a6a3a; }

/* ── 圣心录 (v0.5.0 价值观 UI) ── */
.shengxinlu-section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 14px;
}
.shengxinlu-title {
  font-size: 12px;
  color: var(--red-imp);
  margin-bottom: 6px;
  letter-spacing: 2px;
  font-weight: bold;
}
.shengxinlu-subtitle {
  font-size: 10px;
  color: var(--ink-mute);
  margin-bottom: 8px;
  font-style: italic;
}
.shengxinlu-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 16px 44px;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
}
.sxl-label {
  color: var(--ink-soft);
  font-weight: bold;
  letter-spacing: 1px;
  white-space: nowrap;
}
.sxl-phrase {
  color: var(--ink);
  white-space: nowrap;
  overflow: visible;
}
.sxl-bar {
  position: relative;
  height: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.sxl-bar::before {
  /* 中线标记 */
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--border);
}
.sxl-bar > span {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--red-imp);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left .3s ease;
}
/* ── 圣心录 tooltip (v0.5.6) ── */
.sxl-info {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--gold);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  transition: background .15s ease;
}
.sxl-info:hover,
.sxl-info:focus {
  background: rgba(184,134,11,.15);
  outline: none;
}
.sxl-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  padding: 9px 11px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(60,40,10,.18);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.7;
  text-align: left;
  z-index: 50;
  cursor: default;
  white-space: normal;
  letter-spacing: 0;
}
.sxl-tip strong {
  color: var(--red-imp);
  font-weight: bold;
}
.sxl-info:hover .sxl-tip,
.sxl-info:focus .sxl-tip,
.sxl-info.sxl-tip-active .sxl-tip {
  display: block;
}

/* ── 起居注分色 ── */
.log-list .log-item.faction { color: #8a6a08; }
.log-list .log-item.crisis  { color: var(--red-imp); font-weight: bold; }
.log-list .log-item.birth   { color: var(--green); }
.log-list .log-item.narrative { color: var(--ink-soft); font-style: italic; }

/* ── 模态框内部 ── */
.modal-title {
  font-size: 18px;
  color: var(--red-imp);
  text-align: center;
  letter-spacing: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.modal-subtitle {
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  letter-spacing: 2px;
  margin-top: -10px;
  margin-bottom: 16px;
  font-style: italic;
}
.modal-body {
  color: var(--ink);
  line-height: 1.9;
  margin-bottom: 20px;
  text-align: justify;
  font-size: 14px;
}
.modal-footer {
  text-align: center;
}
.modal-btn {
  background: var(--red-imp);
  color: var(--bg-paper);
  border: none;
  padding: 8px 24px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 4px;
  cursor: pointer;
  border-radius: 2px;
}
.modal-btn:hover { background: #6b1414; }

/* ── 其它 ── */
.empty-text { color: var(--ink-mute); font-size: 12px; font-style: italic; }
.faction-zhonggong { color: #8b3a3a; }
.faction-taihou    { color: #5a7a8a; }
.faction-nianshi   { color: #c87520; }
.faction-zhenshi   { color: #3a7a5a; }
.faction-sanren    { color: #888; }
.dot-zhonggong { background: #8b3a3a; }
.dot-taihou    { background: #5a7a8a; }
.dot-nianshi   { background: #c87520; }
.dot-zhenshi   { background: #3a7a5a; }
.dot-sanren    { background: #888; }

/* ── Phase 3b-1:皇嗣 Tab ── */
.children-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}
.empty-hint { font-size: 11px; opacity: 0.7; }
.children-section-title {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 4px;
  padding: 10px 4px 6px;
  border-bottom: 1px dashed var(--border);
  margin: 8px 0 6px;
  text-align: center;
}
.children-mourn-title {
  color: #6a4a4a;
  margin-top: 16px;
}
.child-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.3);
}
.child-card.child-safe {
  background: rgba(90,138,90,0.08);
  border-color: rgba(90,138,90,0.4);
}
.child-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.child-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}
.child-meta {
  color: var(--ink-soft);
  font-size: 11px;
}
.child-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  font-size: 11px;
}
.child-bar-label {
  width: 28px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.child-bar {
  flex: 1;
  height: 8px;
  background: rgba(80,65,40,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.child-bar-fill {
  height: 100%;
  transition: width 0.3s;
}
.child-health-fill { background: linear-gradient(90deg, #c97a7a, #5a8a5a); }
.threat-low  { background: var(--green); }
.threat-mid  { background: var(--gold); }
.threat-high { background: var(--red-imp); }
.child-bar-num {
  width: 26px;
  text-align: right;
  color: var(--ink-soft);
  font-size: 10px;
  flex-shrink: 0;
}
.child-protect-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.child-protect-btn {
  flex: 1;
  padding: 6px 2px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 2px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}
.child-protect-btn-main {
  font-size: 12px;
  font-weight: 600;
}
.child-protect-btn-sub {
  font-size: 9px;
  opacity: 0.75;
  white-space: nowrap;
}
.child-protect-btn:hover:not(:disabled) {
  background: var(--bg-paper);
  color: var(--ink);
}
.child-protect-btn.active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  font-weight: 700;
}
.child-protect-btn.active .child-protect-btn-sub {
  opacity: 0.95;
}
.child-protect-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.child-protect-btn:disabled .child-protect-btn-sub {
  color: var(--red-imp);
  opacity: 0.7;
  font-style: italic;
}
.child-protect-hint {
  font-size: 10px;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-top: 6px;
  margin-bottom: 2px;
  text-align: center;
  letter-spacing: 1px;
}
.child-threat-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.child-threat-tag.threat-tag-low  { background: rgba(90,138,90,0.15); color: var(--green); }
.child-threat-tag.threat-tag-mid  { background: rgba(184,134,11,0.18); color: var(--gold); }
.child-threat-tag.threat-tag-high { background: rgba(139,26,26,0.18); color: var(--red-imp); font-weight: 700; }
.child-mourn {
  padding: 6px 10px;
  margin-bottom: 4px;
  border-left: 2px solid #6a4a4a;
  background: rgba(106,74,74,0.05);
}
.child-mourn-name {
  color: #6a4a4a;
  font-size: 13px;
  font-weight: 600;
}
.child-mourn-meta {
  color: var(--ink-soft);
  font-size: 11px;
  margin-top: 2px;
}

/* ── v0.5.8:立绘系统 ── */
/* 大橘左栏槽 */
.emperor-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-placeholder {
  color: var(--ink-soft);
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
  padding: 8px;
  font-style: italic;
  opacity: 0.6;
}
.portrait-ph-mood {
  font-size: 11px;
  color: var(--gold);
  font-style: normal;
}
/* v0.7.14:立绘 mood 文字标签隐藏 — 立绘表情已表达 mood,文字冗余。
   特殊态 .portrait-badge(pregnant/banished/dead 等)仍保留显示。 */
.portrait-mood-label {
  display: none;
}
/* 大橘 5 档微调底色(非破坏性) */
.portrait-mood-critical { background: #2a1810; }
.portrait-mood-breakdown { background: #3a2a3a; }
.portrait-mood-tired { background: #4a3a2a; }
.portrait-mood-vigorous { background: #f7e6c0; }

/* v0.6.7:大橘年龄行 */
.emperor-age {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin: -6px 0 12px;
  letter-spacing: 1px;
}

/* 详情面板 */
.modal-box-detail {
  max-width: 540px;
  width: 92%;
  padding: 24px;
  position: relative;
}
.modal-close-x {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.modal-close-x:hover { color: var(--red-imp); }
.detail-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
}
.detail-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 特殊态滤镜(程序化处理孕/冷宫/夭折) */
.portrait-overlay-pregnant .portrait-img,
.portrait-overlay-pregnant .portrait-placeholder {
  /* 孕态:温暖偏金,无灰度 */
  filter: sepia(0.15) brightness(1.02);
}
.portrait-overlay-pregnant {
  box-shadow: inset 0 0 0 2px var(--gold);
}
.portrait-overlay-banished .portrait-img,
.portrait-overlay-banished .portrait-placeholder {
  /* 冷宫:灰度+暗角 */
  filter: grayscale(0.7) brightness(0.7);
}
.portrait-overlay-banished {
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}
.portrait-overlay-dead .portrait-img,
.portrait-overlay-dead .portrait-placeholder {
  /* 夭折:深灰+黑边 */
  filter: grayscale(1) brightness(0.55);
}
.portrait-overlay-dead {
  box-shadow: inset 0 0 0 3px #2a1810;
}
.portrait-badge {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  z-index: 2;
}
.portrait-badge-pregnant {
  background: var(--gold);
  color: #fff;
}
.portrait-badge-banished {
  background: rgba(80,80,80,0.85);
  color: #ddd;
}
.portrait-badge-dead {
  background: rgba(20,15,10,0.9);
  color: #aaa;
}
.detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.detail-rank {
  font-size: 13px;
  color: var(--gold);
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
}
.detail-tags {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
}
.detail-base {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}
.detail-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0 4px;
}
.detail-stat {
  display: grid;
  grid-template-columns: 36px 1fr 60px;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  margin-top: 4px;
}
.detail-stat-label { color: var(--ink-soft); }
.detail-bar {
  height: 8px;
  background: rgba(80,65,40,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.detail-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #c97a7a, #8b1a1a);
  transition: width 0.3s;
}
.detail-stat-val {
  font-size: 11px;
  color: var(--ink);
  text-align: right;
}
.detail-meta {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.detail-promo-ok    { color: var(--red-imp); }
.detail-promo-block { color: var(--ink-mute); font-style: italic; }
.detail-state-line {
  margin-top: 8px;
}
.detail-status {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--ink-soft);
}
.detail-status-pregnant {
  border-color: var(--gold);
  color: var(--gold);
}
.detail-status-banished {
  border-color: #888;
  color: #666;
  background: rgba(0,0,0,0.04);
}
.detail-status-dead {
  border-color: #2a1810;
  color: #2a1810;
  background: rgba(42,24,16,0.06);
}
.detail-section {
  margin-top: 14px;
}
.detail-section-title {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 6px;
}
.detail-child {
  font-size: 12px;
  color: var(--ink);
  padding: 2px 4px;
}
.detail-child-dead {
  color: var(--ink-soft);
  font-style: italic;
}
.detail-history {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  font-style: italic;
}
.detail-bg-desc {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.7;
  padding: 4px 8px;
  text-align: justify;
  font-style: italic;
}
/* 已出局行可点击提示 */
.outcast-row { cursor: pointer; }
.outcast-row:hover { background: rgba(184,134,11,0.06); }

/* ===========================================================
   v0.7.14:mobile 微调(< 768px)
   center 内的 grid 在窄屏拉单列;modal/卡片内部留白收紧
   =========================================================== */
@media (max-width: 768px) {
  /* 翻牌区卡片单列 — 字号与底部 opt-btn 一致(12 / 10),每张更扁 */
  .pick-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pick-card {
    padding: 6px 10px 7px;
  }
  .pick-card .name        { font-size: 12px; letter-spacing: 0.5px; }
  .pick-card .rank        { font-size: 10px; }
  .pick-card .tem         { font-size: 10px; }
  .pick-card .affinity    { font-size: 10px; }
  .pick-card .pick-quote  { font-size: 10px; }
  .pick-card .delta       { font-size: 10px; padding-right: 78px; }
  .pick-card .intimacy-corner { font-size: 14px; top: 4px; right: 6px; }
  /* card-actions(晋/惩戒)按钮缩小 */
  .pick-card .card-actions {
    right: 6px;
    bottom: 4px;
    gap: 3px;
  }
  .pick-card .conc-promo-btn,
  .pick-card .punish-trigger,
  .pick-card .punish-opt {
    font-size: 10px;
    padding: 2px 6px;
  }
  /* 位份 tier 强调态 padding 也跟着缩 */
  .pick-card-empress,
  .pick-card-imperial-noble,
  .pick-card-noble {
    padding: 6px 10px 7px;
  }

  /* 中央标题字号收紧 — center-sub 信息已搬到立绘卡(旬数)/ 重复(HP/SAN/POL/金),mobile 完全隐 */
  .center-title {
    font-size: 20px;
    letter-spacing: 4px;
  }
  .center-sub {
    display: none;
  }

  /* 其他动作(独宿/批奏/燕窝)— fixed 锁底,常驻可见。三列并排 */
  #center .other-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px;
    z-index: 50;
    padding: 6px 8px;
    background: rgba(239, 229, 203, 0.96);
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%238b1a1a' stroke-opacity='0.05' stroke-width='0.6'><path d='M8 8 H40 V40 H8 Z'/></g></svg>");
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 4px rgba(0,0,0,.1);
  }
  #center .opt-btn {
    padding: 6px 4px;
    font-size: 11px;
    text-align: center;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  #center .opt-btn .opt-name {
    font-size: 12px;
    letter-spacing: 0;
  }
  #center .opt-btn .opt-delta {
    font-size: 10px;
    line-height: 1.2;
  }
  /* "其他"divider 在 mobile 隐 — fixed 三按钮已自带分隔感 */
  #center > .section-divider {
    display: none;
  }

  /* event banner 在窄屏简化 padding */
  .event-lock-banner {
    font-size: 13px;
    padding: 8px;
  }

  /* ── 事件 modal:banner 图占主导,字号整体收紧 ── */
  .modal-box-event {
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
  }
  .modal-box-event .event-banner {
    width: 100%;                          /* v0.7.16:max-height 约束下 aspect-ratio 反推宽度,会缩窄于 modal — 显式 100% 锁全宽 */
    margin: 0;
    aspect-ratio: 1.6 / 1;
    /* v0.7.14:限高 — 防 768px 视口下 480px banner + 24vh narrative 共撑爆 modal 把 choices 挤出屏外 */
    max-height: 28vh;
    flex-shrink: 0;
    overflow: hidden;
  }
  .modal-box-event .event-banner-img {
    object-position: center center;
  }
  .modal-box-event .modal-title {
    padding: 10px 14px 4px;
    font-size: 16px;
    letter-spacing: 2px;
  }
  .modal-box-event .event-narrative {
    margin: 6px 14px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.75;
    max-height: 24vh;
    overflow-y: auto;
  }
  .modal-box-event .event-choices {
    padding: 0 14px 14px;
    gap: 6px;
    /* v0.7.14:choices 区允许内部滚动,防 4+ 选项时下方选项被 modal max-height 截掉点不到 */
    overflow-y: auto;
    min-height: 0;
  }
  .modal-box-event .event-choice {
    padding: 8px 12px;
  }
  .modal-box-event .event-choice-label { font-size: 12px; letter-spacing: 1.5px; }
  .modal-box-event .event-choice-desc  { font-size: 11px; }
  .modal-box-event .event-choice-stats { font-size: 10px; }
  /* banner 后面的角花(::before/::after)在 mobile 模式下偏移会跑出去,关掉 */
  .modal-box-event .event-banner:not(.no-img) + .modal-title::before,
  .modal-box-event .event-banner:not(.no-img) + .modal-title::after {
    display: none;
  }

  /* ── 妃子详情 modal:单列堆叠,头像居中缩小 — 解决头像下方空白 ── */
  .modal-box-detail {
    padding: 16px 14px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .detail-portrait {
    max-width: 140px;
    margin: 0 auto;
  }
  .detail-name { font-size: 16px; }
  .detail-tags { font-size: 11px; }
  .detail-base { font-size: 11px; }
  .detail-stat { font-size: 11px; }
  .detail-meta, .detail-state-line { font-size: 11px; }
  .detail-section-title { font-size: 11px; }
  .detail-bg-desc, .detail-child, .detail-history { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   教学 overlay + 选秀开局 ceremony (v0.7.15+)
   - body.tut-paused → #modals 视觉隐去,让出屏幕给真实 UI + hint 卡
   - .tut-highlight → 真实 UI 上的金光描边(z-index 抬高浮于 dim 之上)
   - .tut-hint-card → desktop 中央居底 / mobile 满底
   - #btn-tut       → header 右上 ❓ 入口
   ─────────────────────────────────────────────────────────────────────── */

body.tut-paused #modals { visibility: hidden; }

/* 教学三层 — dim(9000)< 高亮真实 UI(9010)< hint 卡(9020)。
   z-index 拉到 9000+ 确保盖过 #audio-mute-btn(200)/ #modals(100)/ mobile chrome 等。
   dim 与 hint 卡各自 position:fixed、直接挂 #tut-root(不包 .tut-overlay)——
   fixed 容器会创建 stacking context,把内部子元素 z-index 困住,反被 body 级高亮元素盖过。 */
.tut-dim {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 14, 8, 0.55);
  pointer-events: auto;     /* 拦背景:玩家点暗区无效,不会穿透触发 chooseAction 等真实 action */
  cursor: default;
}
/* 真实 UI 元素抬到 dim 之上(视觉可见),但教学期间锁掉点击 —— 防玩家误点高亮卡推 turn */
.tut-highlight {
  position: relative;
  z-index: 9010 !important;
  pointer-events: none !important;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 30px 8px rgba(200, 170, 80, 0.45),
              0 0 0 2px rgba(200, 170, 80, 0.6) inset;
  animation: tut-glow 1.8s ease-in-out infinite alternate;
}
@keyframes tut-glow {
  from { box-shadow: 0 0 24px 6px rgba(200, 170, 80, 0.35),
                     0 0 0 2px rgba(200, 170, 80, 0.5) inset; }
  to   { box-shadow: 0 0 40px 12px rgba(200, 170, 80, 0.6),
                     0 0 0 2px rgba(200, 170, 80, 0.85) inset; }
}

/* hint 小卡 — desktop 屏幕正中(fixed,相对 viewport) */
.tut-hint-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 480px;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 18px 20px 16px;
  pointer-events: auto;
  z-index: 9020;
}
/* 高亮目标在屏幕中央(翻牌帧)时,hint 卡避到下方,不遮住高亮目标 */
.tut-hint-card.tut-hint-bottom {
  top: auto;
  bottom: 32px;
  transform: translate(-50%, 0);
}
/* 高亮目标在屏幕底部时,hint 卡避到上方 — top:76px 让开 desktop header(~56px) */
.tut-hint-card.tut-hint-top {
  top: 76px;
  bottom: auto;
  transform: translate(-50%, 0);
}
.tut-hint-title {
  font-family: var(--font-serif, serif);
  font-size: 17px;
  letter-spacing: 4px;
  color: var(--red-imp);
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.tut-hint-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 14px;
}
.tut-hint-body b { color: var(--red-imp); }
/* 延伸小节 — v0.7.15:取消视觉降级,与主文案统一(字号/颜色继承 .tut-hint-body),
   仅保留段间距 —— 教学重排后这些都是核心信息,不再是"可选下钻" */
.tut-hint-ext {
  margin-top: 10px;
}
.tut-hint-actions {
  display: flex;
  justify-content: center;
}
.tut-hint-next {
  background: var(--red-imp);
  color: var(--bg-paper);
  border: 1px solid var(--red-imp);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 3px;
  padding: 8px 22px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tut-hint-next:hover { opacity: 0.85; }

/* ── 选秀开局 ceremony modal ── */
.xuanxiu-opening-box { max-width: 520px; }
.xuanxiu-opening-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 0;
}
.xuanxiu-opening-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  opacity: 0.35;
}
.xuanxiu-opening-dot.active { background: var(--red-imp); opacity: 1; }
.xuanxiu-opening-dot.done   { background: var(--gold);    opacity: 0.7; }
.xuanxiu-opening-title { margin-top: 8px; }
.xuanxiu-opening-narr { padding: 0 24px; line-height: 1.85; }
.xuanxiu-opening-intro {
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 12px;
}
.xuanxiu-opening-quote {
  color: var(--ink);
  font-size: 14px;
  font-style: italic;
}
.xuanxiu-opening-picker {
  padding: 8px 24px 24px;
  display: flex;
  justify-content: center;
}
.xuanxiu-opening-pick,
.xuanxiu-opening-cta {
  font-size: 14px;
  letter-spacing: 4px;
  padding: 10px 28px;
}
.xuanxiu-opening-cta {
  background: var(--red-imp);
  color: var(--bg-paper);
  border: 1px solid var(--red-imp);
}

/* ── ❓ 帮助按钮(header 右上)── */
#btn-tut {
  /* header 是 display:flex — 作为 flex item 自然排版,margin-left:auto 推到最右 */
  margin-left: auto;
  align-self: center;       /* header align-items:baseline 对 button 不合适,改居中 */
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  text-align: center;
  transition: all 0.2s;
}
#btn-tut:hover {
  color: var(--red-imp);
  border-color: var(--red-imp);
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  /* mobile 默认贴底 — 屏幕小,居中会盖住更多 UI。.tut-hint-bottom 归一到贴底 */
  .tut-hint-card,
  .tut-hint-card.tut-hint-bottom {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 16px;
    width: auto;
    max-width: none;
    transform: none;
    padding: 14px 16px;
  }
  /* .tut-hint-top:三策帧用 — 高亮目标 .other-options 是 fixed 底栏,hint 卡须避到顶部
     (top:178px 让开顶部 170px 立绘卡) */
  .tut-hint-card.tut-hint-top {
    left: 8px;
    right: 8px;
    top: 178px;
    bottom: auto;
    width: auto;
    max-width: none;
    transform: none;
    padding: 14px 16px;
  }
  .tut-hint-title { font-size: 15px; letter-spacing: 3px; }
  .tut-hint-body  { font-size: 13px; }
  .xuanxiu-opening-narr { padding: 0 16px; }
  .xuanxiu-opening-intro,
  .xuanxiu-opening-quote { font-size: 13px; line-height: 1.8; }
  .xuanxiu-opening-picker { padding: 8px 16px 20px; }
}

/* ─── feat/tutorial-A:朱笔名册 picker ───────────────────────────────── */
.zhubi-roll {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.zhubi-roll-title {
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--ink-mute);
  text-align: center;
}
.zhubi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 440px;
}
.zhubi-card {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s;
}
.zhubi-card-rank {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-mute);
}
.zhubi-card-name {
  font-family: var(--font-serif, serif);
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--ink);
  margin: 2px 0;
}
.zhubi-card-mark {
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 4px;
  color: var(--ink-mute);
}
/* pending — 未轮到她,灰白纸 */
.zhubi-card-pending {
  opacity: 0.32;
  cursor: not-allowed;
}
/* current — 当前帧,金光待圈,可点 */
.zhubi-card-current {
  border: 2px solid var(--gold);
  background: var(--bg-card);
  box-shadow: 0 0 18px 2px rgba(200, 170, 80, 0.28);
  animation: zhubi-breathe 1.6s ease-in-out infinite alternate;
}
.zhubi-card-current:hover {
  background: #fff7e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 22px 4px rgba(200, 170, 80, 0.45);
}
.zhubi-card-current .zhubi-card-mark {
  color: var(--gold);
}
@keyframes zhubi-breathe {
  from { box-shadow: 0 0 12px 1px rgba(200, 170, 80, 0.18); }
  to   { box-shadow: 0 0 24px 4px rgba(200, 170, 80, 0.4); }
}
/* done — 已圈红,朱笔印,不可再点 */
.zhubi-card-done {
  border: 2px solid var(--red-imp);
  background: var(--bg-card);
  cursor: default;
  opacity: 0.92;
}
.zhubi-card-done .zhubi-card-name {
  color: var(--red-imp);
}
.zhubi-card-done .zhubi-card-mark {
  color: var(--red-imp);
}
/* 朱印效果 — 右上角小红圈,模拟印章 */
.zhubi-card-done::after {
  content: '朱';
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border: 1.5px solid var(--red-imp);
  border-radius: 50%;
  background: var(--bg-paper);
  color: var(--red-imp);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  font-family: var(--font-serif, serif);
  transform: rotate(-12deg);
}
.zhubi-hint {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-soft);
  text-align: center;
  font-style: italic;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .zhubi-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: none;
  }
  /* 三列定宽 grid — rank/name/mark 各列固定,圈红前后 mark 文字长短变化不影响 name 对齐 */
  .zhubi-card {
    display: grid;
    grid-template-columns: 52px 1fr 84px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }
  .zhubi-card-rank { font-size: 11px; text-align: left; }
  .zhubi-card-mark { font-size: 11px; text-align: right; margin-top: 0; }
  .zhubi-card-name { font-size: 16px; margin: 0; text-align: center; }
  .zhubi-card-done::after {
    top: -8px; right: -8px;
  }
}

/* ─── mobile 圣心录 drawer:标题由 drawer header 提供,隐内部重复标题;
       drawer 空间大,内容整体放大更醒目 ─────────────────────────────── */
@media (max-width: 768px) {
  .mdrawer-body .shengxinlu-section {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
  .mdrawer-body .shengxinlu-title { display: none; }   /* drawer header 已有"📜 圣心录" */
  .mdrawer-body .shengxinlu-subtitle {
    font-size: 12px;
    margin-bottom: 16px;
    text-align: center;
  }
  .mdrawer-body .shengxinlu-row {
    grid-template-columns: 52px 1fr 22px 96px;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 14px;
  }
  .mdrawer-body .sxl-bar { height: 6px; }
  .mdrawer-body .sxl-bar > span { width: 9px; height: 9px; }
  .mdrawer-body .sxl-info {
    width: 20px; height: 20px; line-height: 20px;
  }
}