/* 数字识人 · 公共主题
 *
 * 作用：各页面在自己内联 <style> 之后引入本文件，用它把主题「收口」到一套口径。
 *   - 统一颜色变量（此前 4 个页面各写一份 :root，--bad / --line 取值互不相同）
 *   - 给需要宽屏的页面提供桌面版式（body 加 ui-wide 类即可）
 *
 * 只放「确认各页一致」的规则，页面自有样式不受影响；
 * 调整主题色请改这里，不要再回各页面改单份变量。
 */
:root{
  --bg:#0E1120; --bg2:#161A30; --bg3:#1E2440;
  --gold:#C9A86A; --gold-l:#E8CD9A; --gold-d:#8A6D3B;
  --cinnabar:#B5483A; --paper:#F5F0E6;
  --ok:#7FB069; --warn:#D9A03C; --bad:#E08A7A;
  --line:rgba(201,168,106,.22);
}

/* 键盘可达性：所有可点元素统一焦点环（原本只有首页有） */
:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* ===== 桌面 / 平板版式 =====
   手机优先的窄列在电脑上会变成屏幕中间一条 480px，读报告、看号码列表都很难受。
   需要宽屏的页面（我的报告、截图识号）给 <body> 加 class="ui-wide" 即可，
   首页与选号表单保持窄列——那里加宽反而会分散注意力。 */
@media (min-width:768px){
  body.ui-wide .wrap{max-width:720px}
  body.ui-wide .payPanel{max-width:560px;margin-left:auto;margin-right:auto}
  body.ui-wide .result,
  body.ui-wide .card{max-width:720px;margin-left:auto;margin-right:auto}
}

/* 大屏上稍微放大正文，避免手机上合适的字号在桌面显得过小 */
@media (min-width:1100px){
  body.ui-wide .wrap{max-width:760px}
}