:root { --bg:#f3f4f6; --card:#fff; --ink:#1b2230; --mute:#6b7280; --line:#e5e7eb; --accent:#1f6feb; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --soft:#eef4ff }
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 -apple-system,"PingFang SC","Microsoft YaHei UI","Noto Sans SC",system-ui,sans-serif; padding-bottom:env(safe-area-inset-bottom) }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line) }
.brand { font-weight:700; font-size:17px } .brand span { font-weight:400; color:var(--mute); margin-left:4px }
main { max-width:640px; margin:0 auto; padding:12px 12px 24px }
.foot { text-align:center; color:var(--mute); font-size:12px; padding:8px 16px 24px }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px }
.card h2 { font-size:18px; margin:0 0 10px } .card h3 { font-size:16px; margin:14px 0 8px }
.center { text-align:center }
.mute { color:var(--mute) } .small { font-size:13px } .ok { color:var(--ok) } .bad { color:var(--bad) } .warn { color:var(--warn) }
button { font:inherit; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); min-height:48px; padding:10px 16px; cursor:pointer }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600 }
button.big { width:100%; font-size:17px }
button:disabled { opacity:.45; cursor:default }
button.link { min-height:36px; border:none; background:none; color:var(--accent); padding:4px 8px }
input, textarea { font:inherit; width:100%; border:1px solid #cfd5dd; border-radius:12px; padding:12px 14px; background:#fff; color:var(--ink); min-height:48px }
input:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent) }
label.f { display:block; font-size:14px; color:var(--mute); margin:12px 0 6px }
.msg { padding:12px 14px; border-radius:12px; margin:10px 0; font-size:15px }
.msg.err { background:#fdecec; color:var(--bad) } .msg.ok { background:#e7f6ec; color:var(--ok) } .msg.info { background:var(--soft); color:#1e3a8a }
.msg.stop { background:#fff4e5; color:#7a3e00; border:1px solid #f5cf99 }
/* PIN pad */
.pinrow { display:flex; justify-content:center; gap:14px; margin:18px 0 }
.pinrow i { width:18px; height:18px; border-radius:50%; border:2px solid #9aa3af; display:block }
.pinrow i.on { background:var(--ink); border-color:var(--ink) }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:320px; margin:0 auto }
.pad button { min-height:62px; font-size:24px; border-radius:16px }
/* tabs */
.tabs { display:flex; gap:6px; background:#e5e7eb; padding:4px; border-radius:14px; margin-bottom:12px; position:sticky; top:58px; z-index:4 }
.tabs button { flex:1; border:none; background:transparent; min-height:44px; border-radius:10px; font-size:15px }
.tabs button.on { background:#fff; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08) }
/* numbers */
.kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
.kpi { background:var(--soft); border-radius:12px; padding:12px }
.kpi b { display:block; font-size:26px; line-height:1.2 } .kpi span { color:var(--mute); font-size:13px }
.kpi.green { background:#e7f6ec } .kpi.amber { background:#fff4e5 }
.rows > div { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line) }
.rows > div:last-child { border-bottom:none }
.rows .r { text-align:right; white-space:nowrap }
.tag { display:inline-block; font-size:12px; padding:1px 8px; border-radius:10px; background:#eef1f5; color:var(--mute); white-space:nowrap }
.tag.sold { background:#e7f6ec; color:var(--ok) } .tag.dorm { background:#fff4d6; color:#8a5a00 } .tag.up { background:#efe7ff; color:#5b21b6 }
.tag.stop { background:#fdecec; color:var(--bad) }
.mono { font-family:ui-monospace,Consolas,monospace }
.codes { width:100% }
.code-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px dashed var(--line) }
.code-item:last-child { border-bottom:none }
.code-item .a { min-width:0 } .code-item .a div:first-child { font-weight:600 }
details.batch { border:1px solid var(--line); border-radius:12px; padding:0 12px; margin-bottom:10px; background:#fff }
details.batch summary { list-style:none; cursor:pointer; padding:12px 0; display:flex; justify-content:space-between; gap:8px; align-items:center }
details.batch summary::-webkit-details-marker { display:none }
details.batch summary::after { content:'展开'; color:var(--accent); font-size:13px }
details.batch[open] summary::after { content:'收起' }
/* trend bars */
.bars { display:flex; align-items:flex-end; gap:6px; height:110px; padding-top:8px }
.bars div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; font-size:11px; color:var(--mute) }
.bars div i { width:100%; background:var(--accent); border-radius:6px 6px 0 0; min-height:2px; display:block }
.bars div b { font-size:12px; color:var(--ink); font-weight:600 }
/* credit meter */
.meter { display:flex; gap:6px; margin:10px 0 }
.meter i { flex:1; height:14px; border-radius:7px; background:#d1fae5 }
.meter i.used { background:#fca5a5 }
.confirm { border:2px solid var(--accent); }
.confirm .rows > div span:first-child { color:var(--mute) }