/* 智慧园区一码通 · 通用安卓平板消费机界面
 * 适配范围：通用安卓平板（10~13" 横屏为主，竖屏自适应），不绑商米硬件。
 * 设计：以视口为基准的流式布局，字号/间距用 clamp() 随屏自适应，大屏不空旷、小屏不拥挤。
 * 科技蓝主题，高对比，大触摸目标。*/
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", system-ui, sans-serif;
  background: #0b1220; color: #e8eefc; overflow: hidden; user-select: none;
}
.app {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  max-width: 1600px; margin: 0 auto;            /* 超大屏居中，避免两侧过度拉伸 */
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(36,90,160,.18), transparent 60%),
    #0b1220;
}

/* 顶部状态栏 */
header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: clamp(8px, 1.4vh, 16px) clamp(14px, 2.4vw, 30px);
  background: linear-gradient(90deg, #12233f, #0d1a30);
  border-bottom: 2px solid #1d3a63;
}
header .dev { font-size: clamp(15px, 2.2vw, 22px); font-weight: 700; color: #6fe3ff; }
header .clock { font-size: clamp(14px, 1.8vw, 18px); color: #aab8d4; font-variant-numeric: tabular-nums; }
.netwrap { display: flex; align-items: center; gap: 10px; }
.net { font-size: clamp(14px, 1.8vw, 18px); font-weight: 700; }
.net.on { color: #36e07f; } .net.off { color: #ff8a5c; }
.offcnt { font-size: clamp(12px, 1.4vw, 14px); color: #ffcf6f; background: #3a2a10; padding: 2px 8px; border-radius: 10px; }

/* 主体两栏（左：金额+键盘，右：提示+用户+交易+扫码行） */
main {
  flex: 1; display: flex; min-height: 0;
  gap: clamp(10px, 1.6vw, 20px); padding: clamp(10px, 1.6vw, 20px);
}
.left {
  width: clamp(360px, 44%, 720px); min-width: 320px;
  display: flex; flex-direction: column;
  border-right: 2px solid #15263f; padding-right: clamp(10px, 1.6vw, 20px);
}
.right { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.amount {
  font-size: clamp(46px, 9vw, 132px); font-weight: 800; text-align: right; color: #ffffff;
  background: #0e1c33; border: 2px solid #1d3a63; border-radius: 16px;
  padding: clamp(6px,1vh,12px) clamp(16px,2.4vw,28px); margin-bottom: clamp(8px,1.4vh,16px);
  font-variant-numeric: tabular-nums; letter-spacing: 1px; line-height: 1.05;
}

/* 数字键盘 */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px,1.2vw,14px); flex: 1; }
.key {
  font-size: clamp(26px, 4.4vw, 52px); font-weight: 700; color: #e8eefc; background: #16294a;
  border: 1px solid #244068; border-radius: 16px; cursor: pointer; min-height: clamp(52px, 9vh, 96px);
  transition: transform .05s, background .15s;
}
.key:active { transform: scale(.96); background: #1f3c6b; }
.key.back { color: #ff8a5c; }

.actions { display: flex; gap: clamp(8px,1.2vw,14px); margin-top: clamp(8px,1.4vh,16px); }
.act { flex: 1; font-size: clamp(20px, 3.2vw, 38px); font-weight: 700; padding: clamp(12px,2vh,20px); border-radius: 16px; border: none; cursor: pointer; }
.act.clear { background: #3a2a10; color: #ffcf6f; }
.act.confirm { background: #0c8a4a; color: #fff; }
.act:active { transform: scale(.97); }

/* 右栏 */
.hint { font-size: clamp(20px, 3.2vw, 34px); font-weight: 700; color: #6fe3ff; min-height: 1.4em; }
.usercard {
  background: #0e1c33; border: 2px solid #1d6a63; border-radius: 16px; padding: clamp(10px,1.6vh,18px) clamp(14px,2vw,22px); margin: clamp(8px,1.4vh,14px) 0;
  display: none;
}
.usercard .uname { font-size: clamp(24px, 3.6vw, 40px); font-weight: 800; color: #fff; }
.usercard .umeta { font-size: clamp(14px, 1.8vw, 20px); color: #9fb0d0; margin-top: 2px; }
.usercard .ubal { font-size: clamp(18px, 2.6vw, 28px); color: #36e07f; margin-top: 6px; }
.usercard .ubal b { font-size: clamp(24px, 3.6vw, 40px); }

.message { font-size: clamp(17px, 2.6vw, 26px); font-weight: 700; padding: clamp(8px,1.2vh,12px) clamp(12px,1.6vw,16px); border-radius: 12px; margin: clamp(8px,1.4vh,14px) 0; min-height: 1.4em; }
.message.info { background: #11233f; color: #aab8d4; }
.message.ok { background: #0c3a22; color: #36e07f; }
.message.warn { background: #3a2a10; color: #ffcf6f; }
.message.err { background: #3a1414; color: #ff7a7a; }

.recent { flex: 1; margin-top: 8px; min-height: 0; display: flex; flex-direction: column; }
.recent-title { font-size: clamp(14px, 1.8vw, 20px); color: #7e8db0; margin-bottom: 4px; }
.recent-list { flex: 1; overflow: auto; font-size: clamp(14px, 1.8vw, 20px); }
.rtx { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px solid #15263f; color: #c4d2ee; }
.rtx .ok { color: #36e07f; } .rtx .warn { color: #ffcf6f; }

.scanrow { display: flex; gap: clamp(8px,1.2vw,14px); margin-top: clamp(8px,1.4vh,14px); }
.scan { flex: 1; font-size: clamp(18px, 2.6vw, 30px); font-weight: 700; padding: clamp(12px,1.8vh,18px); border-radius: 16px; border: 2px solid #1d6a63; background: #0d2a28; color: #6fe3ff; cursor: pointer; }
.scan:active { transform: scale(.97); }
.scan.face { border-color: #8a5a00; background: #2a1f08; color: #ffce6f; }
.cdstate { margin-top: 6px; font-size: clamp(12px, 1.4vw, 15px); color: #9ec5ff; text-align: center; }

/* 底部功能栏 */
footer { display: flex; gap: clamp(8px,1.2vw,14px); padding: clamp(8px,1.4vh,14px) clamp(14px,2vw,24px); background: #0d1a30; border-top: 2px solid #1d3a63; }
footer button { flex: 1; font-size: clamp(16px, 2.2vw, 24px); font-weight: 700; padding: clamp(12px,1.8vh,18px); border-radius: 14px; border: none; background: #16294a; color: #cfe0ff; cursor: pointer; }
footer button:active { transform: scale(.97); }
#btnTestPrint { background: #2a2440; color: #c9b6ff; }

/* 弹窗（自适应大屏，放宽上限） */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: #10203a; border: 2px solid #244068; border-radius: 16px; padding: clamp(18px,2.4vh,28px); width: min(90%, 520px); }
.modal-box h3 { font-size: clamp(20px, 2.6vw, 26px); color: #6fe3ff; margin-bottom: 12px; }
.modal-box label { display: block; font-size: clamp(13px,1.6vw,16px); color: #9fb0d0; margin: 10px 0 4px; }
.modal-box input { width: 100%; font-size: clamp(16px,2vw,22px); padding: clamp(10px,1.4vh,14px); border-radius: 10px; border: 1px solid #244068; background: #0b1626; color: #fff; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns button { flex: 1; font-size: clamp(16px,2vw,22px); font-weight: 700; padding: clamp(10px,1.4vh,14px); border-radius: 10px; border: none; cursor: pointer; }
.modal-btns .primary { background: #0c8a4a; color: #fff; }
.modal-btns button:not(.primary) { background: #243b5e; color: #cfe0ff; }

/* 竖屏平板（约 768~1024px 宽，如 iPad 竖持 / 安卓平板竖屏）：
 * 改为上下堆叠，金额+键盘在上、信息区在下，充分利用竖屏高度。*/
@media (orientation: portrait) and (max-width: 1100px) {
  main { flex-direction: column; }
  .left { width: 100%; min-width: 0; border-right: none; border-bottom: 2px solid #15263f; padding-right: 0; padding-bottom: clamp(10px,1.6vh,16px); }
  .amount { font-size: clamp(40px, 11vw, 88px); }
  .recent { max-height: 26vh; }
}
/* 窄屏手机形态（极窄竖屏）：进一步压缩键盘高度，避免溢出 */
@media (orientation: portrait) and (max-width: 560px) {
  .key { min-height: 44px; font-size: clamp(22px, 7vw, 34px); }
}

/* 摄像头扫码浮层（大屏自适应，放宽上限） */
.camscan { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.82); align-items: center; justify-content: center; z-index: 80; }
.camscan.show { display: flex; }
.camscan-box { width: min(92%, 900px); background: #0b1626; border: 2px solid #244068; border-radius: 16px; overflow: hidden; }
.camscan-head { display: flex; align-items: center; justify-content: space-between; padding: clamp(10px,1.4vh,16px) clamp(14px,2vw,20px); background: #12233f; color: #6fe3ff; font-size: clamp(18px,2.4vw,24px); font-weight: 700; }
.camscan-close { width: clamp(36px,4vw,48px); height: clamp(36px,4vw,48px); border-radius: 10px; border: none; background: #243b5e; color: #fff; font-size: clamp(18px,2.4vw,24px); cursor: pointer; }
.camscan-view { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; }
.camscan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camscan-aim { position: absolute; inset: 14% 26%; border: 3px solid #36e07f; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.25); pointer-events: none; }
.camscan-status { padding: clamp(10px,1.4vh,16px) clamp(14px,2vw,20px); text-align: center; font-size: clamp(14px,1.8vw,18px); color: #aab8d4; }