/* 收银台前台 —— 移动端优先，桌面居中 */
:root{
  --brand:#8d1030;
  --accent:#e20030;
  --page-bg:#f3e3e8;
  --text:#1a1a1a;
  --muted:#9a9a9a;
  --line:#e8e8e8;
  --input-bg:#ffffff;
  --radius:8px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--page-bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
body{min-height:100vh}
.app{
  max-width:520px;margin:0 auto;background:#fff;min-height:100vh;
  box-shadow:0 0 40px rgba(0,0,0,.06);position:relative;padding-bottom:28px;
}
/* 顶部栏 */
.topbar{
  height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;position:sticky;top:0;background:#fff;z-index:20;
}
.topbar .title{font-size:17px;font-weight:500;letter-spacing:.2px;color:#111}
.icon{
  width:40px;height:40px;border:0;background:transparent;font-size:19px;color:#333;
  display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;
  font-family:inherit;
}
.icon:active{opacity:.5}
/* 横幅 */
.banner{position:relative;width:100%;overflow:hidden;background:#1a1220}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner.auto img{height:auto;object-fit:contain}
.banner .banner-text{
  position:absolute;left:16px;bottom:18px;color:#fff;font-size:15px;font-weight:500;
  text-shadow:0 1px 6px rgba(0,0,0,.55);letter-spacing:.5px;
}
/* 表单 */
.form{padding:20px 18px 0}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:15px;color:#222;margin-bottom:8px;line-height:1.3;
}
.field label .req{color:var(--accent);margin-right:3px;font-style:normal}
.field .ctrl{position:relative}
.field input,.field select,.field textarea{
  width:100%;height:44px;border:1px solid var(--line);border-radius:6px;background:var(--input-bg);
  font-size:15px;color:#111;padding:0 12px;font-family:inherit;appearance:none;-webkit-appearance:none;
  outline:none;transition:border-color .15s;
}
.field textarea{height:84px;padding:10px 12px;resize:vertical;line-height:1.4}
.field input::placeholder,.field textarea::placeholder{color:#b7b7b7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.field select:invalid,.field select.placeholder{color:#b7b7b7}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--accent)}
.field .err{display:none;color:var(--accent);font-size:12px;margin-top:6px;line-height:1.35}
.field.invalid .err{display:block}
/* 提交 */
.submit{
  width:100%;height:48px;border:0;border-radius:8px;background:var(--brand);color:#fff;
  font-size:16px;font-weight:500;letter-spacing:1px;margin-top:6px;cursor:pointer;
  font-family:inherit;transition:opacity .15s;
}
.submit:active{opacity:.85}
.submit:disabled{opacity:.6;cursor:not-allowed}
.note{color:#9a9a9a;font-size:12px;line-height:1.6;text-align:center;margin:12px 4px 0}
/* toast */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.78);color:#fff;padding:11px 18px;border-radius:8px;font-size:14px;
  z-index:99;opacity:0;pointer-events:none;transition:opacity .2s;max-width:78vw;text-align:center;line-height:1.5;
}
.toast.show{opacity:1}
@media (min-width:521px){
  .app{min-height:100vh}
}