/* ===== 宇森配方管理系统 · 样式 v6 ===============================================
   没有改任何页面的 HTML/PHP 结构，只改了这一个文件。
   配色思路：主色沿用一直在用的深青（代表系统本身、操作按钮），
   另外加了一个陶土色，专门用在「称出来的数字」上（颜料合计、对账金额等），
   把「这是测量结果」和「这是功能按钮」从颜色上分开，分辨率不高的车间屏幕上也能一眼看出重点。
   ================================================================================= */
* { box-sizing: border-box; }
:root {
  --ink: #17202b;        /* 正文 */
  --ink-soft: #5d6877;   /* 次要文字 */
  --line: #d5dae1;       /* 边框线 */
  --bg: #eef1ef;         /* 页面底色：偏冷的浅灰绿，像塑料原料的颜色 */
  --surface: #fff;       /* 卡片、输入框底色 */
  --teal: #0b6e6e;       /* 主色：系统本身、按钮、链接、导航 */
  --teal-deep: #075555;  /* 主色，按下/加深时用 */
  --teal-tint: #e3f1f1;  /* 主色的浅底色，用于高亮、选中 */
  --clay: #b5620a;       /* 强调色：专门标「称出来的数字」，不用在按钮或导航上 */
  --danger: #b3261e;
  --radius: 10px;
}
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 "Microsoft YaHei", "PingFang SC", sans-serif; }
.wrap { max-width: 760px; margin: 0 auto; padding: 16px; }

h1 { font-size: 20px; margin: 0; letter-spacing: .06em; font-weight: 700;
  display: flex; align-items: center; gap: 8px; }
h1::before { content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: linear-gradient(135deg, var(--teal), var(--clay)); flex: none; }

nav { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 3px; margin-bottom: 14px; }
nav a { flex: 1; text-align: center; padding: 9px 2px; color: var(--ink-soft); font-size: 16px; white-space: nowrap;
  text-decoration: none; font-weight: 600; border-radius: 7px;
  transition: background .12s, color .12s; }
nav a.on { color: #fff; background: var(--teal); }
nav a:not(.on):hover { background: var(--teal-tint); color: var(--teal-deep); }
nav .sm { display: none; }
@media (max-width: 520px) { nav a { font-size: 15px; } nav .lg { display: none; } nav .sm { display: inline; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px; }

label { display: block; font-size: 14px; color: var(--ink-soft); margin: 10px 0 4px; }
input, select, textarea { width: 100%; padding: 9px 10px; font: inherit; color: inherit;
  background: #f7f8fa; border: 1px solid var(--line); border-radius: 7px;
  transition: border-color .12s, background .12s; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px var(--teal-tint); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.row .n { flex: 1; max-width: 260px; }
.row .g { width: 110px; }

button, .btn { font: inherit; padding: 9px 14px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface); color: inherit; cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .12s, border-color .12s, transform .05s; }
button:hover, .btn:hover { border-color: #b9c2cc; }
button:active, .btn:active { transform: translateY(1px); }
button.pri, .btn.pri { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }
button.pri:hover, .btn.pri:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.msg { margin: 8px 0; color: var(--teal); font-weight: 600; }
.err { margin: 8px 0; color: var(--danger); font-weight: 600; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }

.item h3 { margin: 0; font-size: 17px; }
.meta { color: var(--ink-soft); font-size: 14px; }
.pg { margin: 6px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
button.del { color: var(--danger); }
.bar form { margin: 0; }
.empty { text-align: center; color: var(--ink-soft); padding: 28px 0; }
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 16px 0; }
.search-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; align-items: end; }
.search-row label { margin-top: 0; }
@media (max-width: 480px) { .search-row { grid-template-columns: 1fr; } }

.cur-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0; }
.cur { font-weight: 700; color: var(--clay); font-variant-numeric: tabular-nums; }
.hits a { display: block; margin-top: 6px; text-align: left; }
.sum { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 4px; }
.sum b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
tbody tr:hover td { background: #f7f9f9; }
td.big { font-weight: 700; font-size: 18px; color: var(--clay); }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.po, .ck { display: none; }
@media print {
  nav, .noprint, h1 { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 0; padding: 0; }
  .po { display: block; font-size: 20px; line-height: 1.8; margin-bottom: 12px;
        border-bottom: 2px solid #000; padding-bottom: 8px; }
  .ck { display: table-cell; }
  th, td { font-size: 20px; color: #000; border-color: #000; }
  td.big { color: #000; }
  tbody tr:hover td { background: transparent; }
}

/* 确认对话框（点「打印」时的「确认生产 / 取消」） */
.modal-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(23,32,43,.5);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 12px; padding: 18px; max-width: 420px; width: 100%;
  box-shadow: 0 12px 34px rgba(23,32,43,.28); }
.modal h3 { margin: 0 0 8px; font-size: 18px; }
.modal p { margin: 0 0 6px; line-height: 1.7; }
.modal .bar { justify-content: flex-end; }
@media print { .modal-bg { display: none !important; } }

/* ===== 版面优化 v5 ===== */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 12px; }
.um { position: relative; font-size: 14px; color: var(--ink-soft); }
.um summary { list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); white-space: nowrap; user-select: none;
  transition: border-color .12s; }
.um summary:hover { border-color: #b9c2cc; }
.um summary::-webkit-details-marker { display: none; }
.um summary::after { content: " \25BE"; }
.um .menu { position: absolute; right: 0; top: 38px; min-width: 150px; background: #fff; z-index: 40;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(23,32,43,.18); overflow: hidden; }
.um .menu a { display: block; padding: 11px 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #eef0f3; }
.um .menu a:hover { background: #f7f9f9; }
.um .menu a:last-child { border-bottom: 0; }
.um .menu a.out { color: var(--danger); }
.subtabs { display: flex; gap: 8px; margin: -4px 0 14px; }
.subtabs a { padding: 6px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s, color .12s; }
.subtabs a.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.subtabs a:not(.on):hover { background: var(--teal-tint); color: var(--teal-deep); }
@media print { .topbar, .subtabs { display: none !important; } }

.trialbar { background: #fdf3e0; border: 1px solid #e8c77c; color: #6b4e02; border-radius: 8px;
  padding: 7px 12px; margin: 0 0 12px; font-size: 14px; }
.trialbar a { color: var(--teal); font-weight: 600; margin-left: 6px; }
@media print { .trialbar { display: none !important; } }

.ver { text-align: center; color: #9aa3af; font-size: 12px; margin: 28px 0 8px; }
@media print { .ver { display: none !important; } }

/* 配方计算页的表格：宽度是原来的 80%，居中；颜料型号和用量不会离得太远。
   隔行很浅的灰底，眼睛顺着一行看；打印时也一样（底色要用 print-color-adjust 才会印出来） */
.tw.ct table { width: 80%; margin: 0 auto; }
.ct th.ck, .ct td.ck { text-align: center; }
.ct tbody tr:nth-child(even) td { background: #fafcfc; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ct tbody tr:hover td { background: #f1f6f6; }
@media print { .ct tbody tr:nth-child(even) td { background: #f8f8f8; } .ct tbody tr:hover td { background: #f8f8f8; } }

/* ===== v8：头部与登录页重做 ===================================================
   头部：白色通栏，上排是名称和账号，下排是文字标签页（当前页用深青下划线），
   不再是「标题 + 药丸 + 方框导航」三块各自带边框。
   登录/注册/忘记密码/到期页：左侧品牌栏 + 右侧表单，手机上品牌栏收成一条顶栏。
   ============================================================================= */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.btn.block { display: block; width: 100%; text-align: center; padding: 12px; }

/* 品牌标：深青方块里一个「宇」，底边一条陶土色，像一块色板 */
.brandmark { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.mk { position: relative; overflow: hidden; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--teal);
  color: #fff; font-size: 18px; font-weight: 800; line-height: 32px; text-align: center; }
.mk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--clay); }
.bn { font-size: 18px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }

/* 应用头部 */
.appbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.appbar-in { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.appbar-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 6px; }
.appbar .brandmark { color: var(--ink); }
.appbar nav { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; gap: 0; }
.appbar nav a { flex: 1; padding: 10px 2px 9px; border-radius: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.appbar nav a.on { background: none; color: var(--teal); border-bottom-color: var(--teal); }
.appbar nav a:not(.on):hover { background: var(--teal-tint); color: var(--teal-deep); }

/* 账号菜单：圆形首字 + 名字 */
.appbar .um summary { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 20px; max-width: 220px; }
.um .av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-deep);
  font-weight: 700; font-size: 14px; line-height: 28px; text-align: center; }
.um .un { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.appbar .um summary::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid var(--ink-soft);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.appbar .um .menu { top: 42px; }
.wrap > .trialbar:first-child, .appbar + .wrap > .trialbar:first-child { margin-top: 12px; }
.appbar + .wrap { padding-top: 14px; }
@media print { .appbar { display: none !important; } }
@media (max-width: 520px) { .bn { font-size: 16px; } .appbar .um summary { max-width: 150px; } }

/* 登录等页面 */
body.auth { background: var(--surface); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
.auth-brand { background: #0a3d3d; color: #cfe3e1; padding: 40px 56px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 40px; }
.auth-brand .brandmark { color: #fff; }
.auth-brand .mk { background: #0f8585; }
.auth-pitch h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.4; font-weight: 700; color: #fff; }
.auth-pitch p { margin: 0 0 28px; max-width: 28em; color: #a5c6c3; }
.slip { position: relative; max-width: 380px; background: #fff; color: var(--ink); border-radius: 10px; padding: 14px 18px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums; }
.slip-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.slip-h b { font-size: 20px; }
.slip-h span { font-size: 14px; color: var(--ink-soft); }
.slip-r { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; }
.slip-t { margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--line); font-weight: 700; color: var(--clay); }
.slip-n { margin-top: 8px; font-size: 12px; color: #9aa3af; text-align: right; }

.auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.3; }
.auth-box .sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.auth-box label { margin: 16px 0 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.auth-box label .hint { margin-left: 8px; color: var(--ink-soft); font-weight: 400; }
.auth-box input { padding: 11px 12px; font-size: 16px; }
.auth-box button.pri.block { display: block; width: 100%; margin-top: 24px; padding: 12px; font-size: 16px; }
.auth-box button.pri:disabled { opacity: .5; cursor: not-allowed; }
.lbl-row { display: flex; justify-content: space-between; align-items: baseline; }
.lbl-row a { font-size: 14px; }
.auth-alt { margin: 20px 0 0; text-align: center; color: var(--ink-soft); font-size: 14px; }
.auth .err, .auth .msg { margin: 0 0 16px; padding: 10px 12px; border-radius: 7px; font-size: 14px; font-weight: 500; }
.auth .err { background: #fdeceb; border-left: 4px solid var(--danger); }
.auth .msg { background: var(--teal-tint); border-left: 4px solid var(--teal); }
.auth .bar { margin-top: 14px; }
.auth-foot { margin-top: 36px; color: #9aa3af; font-size: 12px; text-align: center; }
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { padding: 14px 20px; }
  .auth-pitch { display: none; }
  .auth-main { justify-content: flex-start; padding: 28px 20px 24px; }
}

/* ===== v9：大屏适配 + 链接配色 ================================================ */
a { color: var(--teal); }
.auth-box a { text-underline-offset: 3px; }

/* 左栏：标志和文案同宽居中，文案在剩余高度里垂直居中，不再贴着左边 */
.auth-brand { align-items: stretch; justify-content: flex-start; gap: 0; }
.auth-brand > .brandmark, .auth-brand > .auth-pitch { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
.auth-brand > .brandmark { align-self: auto; }
.auth-brand > .auth-pitch { margin-top: auto; margin-bottom: auto; padding: 48px 0; }
@media (min-width: 1400px) {
  .auth-shell { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1600px) {
  .auth-brand > .brandmark, .auth-brand > .auth-pitch { max-width: 520px; }
  .auth-brand .bn { font-size: 20px; }
  .auth-brand .mk { width: 36px; height: 36px; line-height: 36px; font-size: 20px; border-radius: 9px; }
  .auth-pitch h2 { font-size: 34px; }
  .auth-pitch p { font-size: 17px; }
  .slip { max-width: 440px; padding: 18px 22px 14px; }
  .slip-r { font-size: 17px; padding: 5px 0; }
  .slip-h b { font-size: 22px; }
  .auth-box { max-width: 440px; }
  .auth-box h2 { font-size: 32px; }
  .auth-box .sub { font-size: 17px; margin-bottom: 26px; }
  .auth-box label { font-size: 15px; margin-top: 20px; }
  .auth-box input { padding: 14px 14px; font-size: 17px; }
  .auth-box .pwbox input { padding-right: 50px; }
  .auth-box button.pri.block { padding: 15px; font-size: 17px; margin-top: 28px; }
  .auth-alt, .lbl-row a { font-size: 15px; }
}
@media (max-width: 860px) {
  .auth-brand > .brandmark { max-width: none; margin: 0; }
}

/* ===== v10：登录页左栏改为六个卖点 ============================================= */
.auth-brand > .auth-pitch { padding: 32px 0; }
.auth-pitch h2 { margin-bottom: 26px; }
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pts li { display: flex; gap: 14px; align-items: flex-start; }
.pts .ic { flex: none; width: 38px; height: 38px; border-radius: 9px; background: rgba(255, 255, 255, .09);
  color: #7fd3cc; display: flex; align-items: center; justify-content: center; }
.pts svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pts b { display: block; color: #fff; font-size: 16px; line-height: 1.4; }
.pts li span:not(.ic) { display: block; margin-top: 2px; color: #a5c6c3; font-size: 14px; line-height: 1.6; }
@media (min-width: 1600px) {
  .pts { gap: 22px; }
  .pts .ic { width: 44px; height: 44px; border-radius: 10px; }
  .pts svg { width: 24px; height: 24px; }
  .pts b { font-size: 18px; }
  .pts li span:not(.ic) { font-size: 15px; }
}

/* ===== v11：登录页左栏改为自动轮播的幻灯片（文字标题 + 界面效果图）============= */
.pts { display: none; }
.auth-brand > .auth-pitch { padding: 28px 0 8px; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.slide h2 { margin: 0 0 8px; }
.slide p { margin: 0 0 22px; max-width: 30em; min-height: 3.4em; }

.mock { height: 19.5em; overflow: hidden; background: #fff; color: var(--ink); border-radius: 10px; padding: 1.1em 1.3em;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.m-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: .5em; margin-bottom: .5em;
  border-bottom: 1px solid var(--line); }
.m-h b { font-size: 1.25em; }
.m-h span, .m-s { color: var(--ink-soft); font-size: .93em; }
.m-in { display: inline-block; min-width: 3.4em; padding: .25em .7em; background: #f7f8fa; border: 1px solid var(--line); border-radius: 6px; }
.m-in.wide { min-width: 9em; }
.m-btn { display: inline-block; padding: .3em .9em; border-radius: 6px; background: var(--teal); color: #fff; font-weight: 600; font-size: .93em; }
.m-btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); font-weight: 400; }
.m-bar { display: flex; align-items: center; gap: .7em; margin: .2em 0 .7em; }
.m-bar .m-s { flex: 1; }
.m-bar2 { display: flex; gap: .6em; margin-top: .9em; }
.m-stats { display: flex; gap: 1.5em; margin: .2em 0 .7em; }
.m-stats small { display: block; color: var(--ink-soft); font-size: .86em; }
.m-stats b { font-size: 1.15em; }
.m-tb { width: 100%; border-collapse: collapse; }
.m-tb th, .m-tb td { padding: .38em .3em; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.m-tb th:first-child, .m-tb td:first-child { text-align: left; }
.m-tb th { color: var(--ink-soft); font-size: .86em; font-weight: 600; }
.m-tb td.cl { color: var(--clay); font-weight: 700; }
.m-tb tr.tot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.m-tb.bd th, .m-tb.bd td { border: 1px solid var(--ink); text-align: center; color: var(--ink); font-size: .93em; padding: .35em .2em; }
.m-tb.bd th { font-size: .86em; }
.m-li { display: flex; align-items: center; gap: .8em; padding: .38em 0; border-bottom: 1px solid var(--line); }
.m-li .m-d { flex: 1; }
.m-li .m-in { min-width: 5em; }
.m-b { display: flex; align-items: center; gap: .8em; padding: .28em 0; }
.m-b > span:first-child { width: 4.6em; }
.m-b .tr { flex: 1; height: .75em; border-radius: .4em; background: var(--teal-tint); overflow: hidden; }
.m-b .tr i { display: block; height: 100%; border-radius: .4em; background: var(--teal); }
.m-b .v { width: 4.4em; text-align: right; color: var(--ink-soft); }
.m-ok { padding: .55em .8em; margin-bottom: .6em; border-left: 4px solid var(--teal); background: var(--teal-tint); color: var(--teal-deep); font-weight: 700; border-radius: 4px; }
.m-cur { margin-bottom: .8em; color: var(--clay); font-weight: 700; }

.dots { display: flex; gap: 8px; margin-top: 22px; }
.dots button { position: relative; flex: 1; max-width: 64px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; }
.dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.dots button:hover::before { background: rgba(255, 255, 255, .35); }
.dots button i { position: absolute; left: 0; top: 7px; height: 4px; width: 0; border-radius: 2px; background: #7fd3cc; }
.dots button.on i { animation: dotfill 5s linear forwards; }
.hold .dots button.on i { animation: none; width: 100%; }
.dots button:focus-visible { outline-color: #7fd3cc; }
@keyframes dotfill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.on { transition: none; }
  .dots button.on i { animation: none; width: 100%; }
}
@media (min-width: 1600px) {
  .mock { font-size: 16.5px; }
  .slide h2 { font-size: 34px; }
  .slide p { font-size: 17px; }
  .dots button { max-width: 76px; }
}

/* ===== v12：付款页（含个人收款码）、收款设置 ================================== */
.um .menu a .cnt { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--clay); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.dotn { flex: none; width: 8px; height: 8px; margin-left: -2px; border-radius: 50%; background: var(--clay); }
body.paypage { background: var(--bg); }
.paybar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 20px; }
.paybar .brandmark { color: var(--ink); }
.paybox { max-width: 460px; margin: 0 auto; padding: 28px 16px 24px; }
.paycard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px 24px 22px; }
.paycard h2 { margin: 0 0 4px; font-size: 24px; }
.payacct { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }
.paycard .msg, .paycard .err { margin: 0 0 14px; padding: 10px 12px; border-radius: 7px; font-size: 14px; font-weight: 500; }
.paycard .err { background: #fdeceb; border-left: 4px solid var(--danger); }
.paycard .msg { background: var(--teal-tint); border-left: 4px solid var(--teal); }
.paylbl { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.paylbl .hint, .paycard label .hint { margin-left: 8px; color: var(--ink-soft); font-weight: 400; }
.opt { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; }
.opt input { width: auto; margin: 0; }
.opt:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.opt .on { font-weight: 600; }
.opt .pr { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--clay); }
.chs { display: flex; gap: 10px; flex-wrap: wrap; }
.chs .opt { flex: 1; min-width: 120px; margin: 0; }
.paycard button.pri.block { display: block; width: 100%; margin-top: 20px; padding: 12px; font-size: 16px; }
.payalt { margin: 14px 0 0; text-align: center; font-size: 14px; }
.payamt { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.payamt b { font-size: 24px; color: var(--clay); font-variant-numeric: tabular-nums; }
.paysteps { margin: 0 0 14px; padding-left: 1.3em; line-height: 1.7; }
.paysteps li { margin-bottom: 4px; }
.clay { color: var(--clay); }
.payqr { display: flex; justify-content: center; margin: 6px 0 12px; min-height: 120px; }
.payqr img { display: block; width: 100%; max-width: 260px; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.paynote { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.paynote b { color: var(--ink); }
.okbox { padding: 14px 0; text-align: center; font-size: 18px; font-weight: 600; color: var(--teal); }
.paycard .bar { margin-top: 0; }
.paycard .btn.block + .payalt { margin-top: 12px; }
.paycard input[type=text] { padding: 11px 12px; font-size: 16px; }
.paycard label { color: var(--ink); font-size: 14px; font-weight: 600; margin: 14px 0 6px; }

.qrset { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.qrcell { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.qrcell img { display: block; width: 100%; max-width: 180px; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.qrnone { margin: 8px 0; padding: 40px 0; text-align: center; color: var(--ink-soft); background: #f7f8fa; border-radius: 8px; font-size: 14px; }
.qrcell input[type=file] { padding: 6px; font-size: 13px; }
label.chk { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 400; font-size: 14px; }
label.chk input { width: auto; margin: 0; }
@media (max-width: 520px) { .qrset { grid-template-columns: 1fr; } .paycard { padding: 20px 16px; } }

/* ===== v13：大屏（带鱼屏、27 寸以上）整体放大 ===================================
   登录后的页面原来内容区只有 760px、字号 16px，放在 34 寸屏上显得很小。
   这里按屏幕宽度整体放大，并把内容区加宽；只在屏幕上生效，不影响打印。
   登录页自己已经有一套大屏规则，这里不动它。 */
@media screen and (min-width: 1700px) {
  body:not(.auth) { zoom: 1.15; }
  .wrap, .appbar-in { max-width: 860px; }
}
@media screen and (min-width: 2100px) {
  body:not(.auth) { zoom: 1.3; }
}

/* ===== v15：登录页左栏在大屏上放大（标志、系统名、效果图）====================== */
@media (min-width: 1900px) {
  .auth-brand { padding: 56px 72px; }
  .auth-brand > .brandmark, .auth-brand > .auth-pitch { max-width: 700px; }
  .auth-brand .brandmark { gap: 14px; }
  .auth-brand .mk { width: 48px; height: 48px; line-height: 48px; font-size: 27px; border-radius: 11px; }
  .auth-brand .mk::after { height: 7px; }
  .auth-brand .bn { font-size: 28px; }
  .slide h2 { font-size: 44px; margin-bottom: 12px; }
  .slide p { font-size: 21px; margin-bottom: 28px; }
  .mock { font-size: 20px; border-radius: 14px; }
  .dots { margin-top: 30px; }
  .dots button { max-width: 100px; }
}
@media (min-width: 2300px) {
  .auth-brand > .brandmark, .auth-brand > .auth-pitch { max-width: 820px; }
  .auth-brand .mk { width: 58px; height: 58px; line-height: 58px; font-size: 32px; border-radius: 13px; }
  .auth-brand .mk::after { height: 8px; }
  .auth-brand .bn { font-size: 34px; }
  .slide h2 { font-size: 52px; }
  .slide p { font-size: 24px; }
  .mock { font-size: 24px; }
  .dots button { max-width: 120px; }
}