:root{
  --gold:#b8923f; --gold-d:#9a7a2f; --gold-l:#e9dcc0; --gold-bg:#faf7f0;
  --ink:#2b2b2b; --muted:#8a8377; --line:#e6e0d4; --white:#fff;
  --ok:#2e7d52; --warn:#e08a2b; --err:#c0392b; --err-bg:#fdecea;
  --shadow:0 2px 14px rgba(120,100,50,.10);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  background:var(--gold-bg);color:var(--ink);font-size:16px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;font-size:16px}
input,select{font-family:inherit;font-size:17px;border:1.5px solid var(--line);
  border-radius:10px;padding:12px 14px;background:var(--white);outline:none;color:var(--ink)}
input:focus,select:focus{border-color:var(--gold)}

/* ---- 登录 ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f3ecda,#e9dcc0)}
.login-card{background:var(--white);padding:42px 38px;border-radius:20px;
  box-shadow:var(--shadow);width:360px;text-align:center}
.login-card h1{font-size:24px;color:var(--gold-d);letter-spacing:1px}
.login-card .sub{color:var(--muted);font-size:14px;margin:6px 0 26px}
.login-card input{width:100%;margin-bottom:14px;text-align:center}
.login-card .remember{display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:14px;color:var(--muted);margin-bottom:20px}
.login-card .remember input{width:auto;margin:0}
.btn-primary{background:var(--gold);color:#fff;padding:13px;width:100%;font-weight:600;
  letter-spacing:1px;transition:.15s}
.btn-primary:hover{background:var(--gold-d)}
.login-err{color:var(--err);font-size:14px;min-height:20px;margin-bottom:8px}

/* ---- 主框架 ---- */
.topbar{background:var(--white);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:12px 22px;position:sticky;top:0;z-index:10}
.topbar .brand{font-size:20px;font-weight:700;color:var(--gold-d);letter-spacing:.5px;white-space:nowrap}
.summary{flex:1;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.summary b{color:var(--ink)}
.topbar .right{display:flex;gap:10px;align-items:center}
.scan-conn{font-size:13px;color:var(--muted)}
.scan-conn .dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#bbb;margin-right:5px;vertical-align:middle}
.scan-conn.on .dot{background:var(--ok)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--muted);padding:8px 14px}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-d)}

.tabs{display:flex;gap:6px;padding:14px 22px 0;flex-wrap:wrap}
.tab{padding:11px 22px;border-radius:12px 12px 0 0;background:transparent;
  color:var(--muted);font-weight:600;font-size:16px}
.tab.active{background:var(--white);color:var(--gold-d);box-shadow:var(--shadow)}
.tab .de{font-size:12px;font-weight:400;opacity:.7;margin-left:5px}

.page{max-width:1100px;margin:0 auto;padding:22px}
.panel{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
  padding:22px;margin-bottom:20px}
.panel h2{font-size:17px;color:var(--gold-d);margin-bottom:16px;font-weight:600}
.panel h2 .de{font-size:12px;color:var(--muted);font-weight:400;margin-left:6px}

/* 扫码区 */
.scan-row{display:flex;gap:12px;align-items:stretch;margin-bottom:14px}
.scan-row input{flex:1;font-size:22px;font-weight:600;padding:16px 18px;letter-spacing:1px}
.scan-row .qty{width:120px;text-align:center}
.reason-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.reason-chip{padding:10px 18px;border-radius:30px;border:1.5px solid var(--line);
  background:var(--white);color:var(--muted);font-size:15px}
.reason-chip.active{background:var(--gold-l);border-color:var(--gold);color:var(--gold-d);font-weight:600}
.act-btn{padding:16px;width:100%;font-size:19px;font-weight:700;color:#fff;letter-spacing:1px}
.act-in{background:var(--ok)} .act-in:hover{filter:brightness(.93)}
.act-out{background:var(--gold)} .act-out:hover{background:var(--gold-d)}

/* 扫码结果卡 */
.result{display:flex;gap:18px;align-items:center;padding:16px;border-radius:12px;
  background:var(--gold-bg);border:1px solid var(--line);margin-bottom:14px;min-height:96px}
.result img{width:80px;height:80px;object-fit:cover;border-radius:10px;background:#eee}
.result .info{flex:1}
.result .sku{font-size:22px;font-weight:700;letter-spacing:.5px}
.result .name{color:var(--muted);font-size:15px;margin-top:2px}
.result .stock{font-size:30px;font-weight:800;color:var(--gold-d)}
.result .stock small{font-size:14px;color:var(--muted);font-weight:400}
.result.low .stock{color:var(--warn)}
.result .combo-tag{display:inline-block;background:var(--gold);color:#fff;font-size:12px;
  padding:2px 9px;border-radius:20px;margin-left:8px;vertical-align:middle}
.combo-list{font-size:13px;color:var(--muted);margin-top:6px}

/* toast */
#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  min-width:280px;max-width:560px;padding:16px 24px;border-radius:12px;color:#fff;
  font-size:17px;font-weight:600;text-align:center;opacity:0;pointer-events:none;
  transition:.25s;z-index:100;box-shadow:0 6px 24px rgba(0,0,0,.18)}
#toast.show{opacity:1}
#toast.ok{background:var(--ok)} #toast.err{background:var(--err)} #toast.warn{background:var(--warn)}

/* undo bar */
.undo-bar{display:flex;align-items:center;gap:12px;background:#fff8e8;
  border:1px solid var(--gold-l);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.undo-bar .ring{font-weight:700;color:var(--gold-d)}
.btn-undo{background:var(--err);color:#fff;padding:10px 18px;font-weight:600}
.btn-undo:disabled{background:#ccc;cursor:default}

/* 流水 / 表格 */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:13px}
tr.undone{opacity:.45;text-decoration:line-through}
.q-in{color:var(--ok);font-weight:600} .q-out{color:var(--err);font-weight:600}
.mini{font-size:13px;padding:5px 11px;background:var(--gold-l);color:var(--gold-d)}

/* 产品卡片网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:12px;text-align:center}
.card img{width:100%;height:120px;object-fit:cover;border-radius:8px;background:#eee}
.card .sku{font-weight:700;margin-top:8px}
.card .nm{font-size:13px;color:var(--muted);height:34px;overflow:hidden}
.card .st{font-size:20px;font-weight:700;color:var(--gold-d);margin-top:4px}
.card.low .st{color:var(--warn)}
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar input,.toolbar select{flex:0 1 auto}
.toolbar input.search{flex:1;min-width:200px}

.hide{display:none!important}

/* 入库清单 */
.cart-empty{color:var(--muted);text-align:center;padding:24px;background:var(--gold-bg);
  border:1px dashed var(--line);border-radius:12px}
.cart-tbl{width:100%}
.cart-tbl th{font-size:14px}
.cart-tbl td{vertical-align:middle;padding:14px 10px}
.cart-img{width:180px}
.cart-img img{width:160px;height:160px;object-fit:cover;border-radius:14px;background:#eee;
  border:1px solid var(--line);cursor:zoom-in;box-shadow:var(--shadow)}
.cart-tbl td:nth-child(2){font-size:24px;font-weight:700}
.cart-stock{font-size:24px;font-weight:700;color:var(--gold-d)}
.cart-qty button{width:42px;height:42px;font-size:24px}
.cart-qty span{min-width:46px;font-size:24px}

/* 点击图片全屏放大 */
.lightbox{position:fixed;inset:0;background:rgba(20,15,5,.85);display:flex;
  align-items:center;justify-content:center;z-index:200;cursor:zoom-out}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:16px;
  box-shadow:0 12px 60px rgba(0,0,0,.55)}
.cart-qty{white-space:nowrap}
.cart-qty button{width:34px;height:34px;font-size:20px;font-weight:700;
  background:var(--gold-l);color:var(--gold-d);border-radius:8px;line-height:1}
.cart-qty span{display:inline-block;min-width:38px;text-align:center;font-size:18px;font-weight:700}
.cart-del{background:transparent;color:var(--err);font-size:18px;padding:4px 8px}
.cart-del:hover{background:var(--err-bg)}
@keyframes flashrow{0%{background:var(--gold-l)}100%{background:transparent}}
tr.flash{animation:flashrow 1s ease-out}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(40,30,10,.4);display:flex;
  align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:16px;padding:26px;width:420px;max-width:92vw}
.modal h3{color:var(--gold-d);margin-bottom:16px}
.modal label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.modal input,.modal select{width:100%}
.modal .row2{display:flex;gap:10px}
.modal .actions{display:flex;gap:10px;margin-top:20px}