:root { --bg:#f5f7fa; --card:#fff; --line:#e4e9f0; --txt:#2c3e50; --sub:#7f8c9b; --pri:#2563eb; --ok:#16a34a; --warn:#d97706; --err:#dc2626; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font:14px/1.6 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--txt); }
header { background:#1e293b; color:#fff; padding:10px 20px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; position:sticky; top:0; z-index:60; box-shadow:0 2px 8px rgba(0,0,0,.18); }
header h1 { font-size:17px; font-weight:600; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav a { color:#cbd5e1; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:14px; }
nav a:hover { background:#334155; color:#fff; }
nav a.on { background:var(--pri); color:#fff; }
main { max-width:none; margin:18px auto; padding:0 14px; }
.hide { display:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:14px; }
.card h3 { font-size:15px; margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; }
.stat b { font-size:26px; display:block; }
.stat span { color:var(--sub); font-size:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { border-bottom:1px solid var(--line); padding:7px 8px; text-align:left; vertical-align:top; }
th { background:#f8fafc; color:var(--sub); font-weight:600; white-space:nowrap; }
tr:hover td { background:#f8fbff; }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; white-space:nowrap; }
.tag.g { background:#dcfce7; color:var(--ok); } .tag.y { background:#fef3c7; color:var(--warn); }
.tag.r { background:#fee2e2; color:var(--err); } .tag.b { background:#dbeafe; color:var(--pri); }
.tag.gr { background:#e5e7eb; color:#4b5563; }
button { padding:6px 14px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; font-size:13px; }
button:hover { border-color:var(--pri); color:var(--pri); }
button.pri { background:var(--pri); color:#fff; border-color:var(--pri); }
button.pri:hover { opacity:.9; color:#fff; }
button.sm { padding:2px 9px; font-size:12px; }
button.danger { color:var(--err); border-color:#fecaca; }
input,select,textarea { padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; font-family:inherit; }
input:focus,select:focus { outline:none; border-color:var(--pri); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.muted { color:var(--sub); font-size:12px; }
.subrow td { background:#fbfcfe; }
img.thumb { width:44px; height:44px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
.logbox { max-height:340px; overflow:auto; font-family:Consolas,monospace; font-size:12px; }
.logbox div { padding:2px 0; border-bottom:1px dashed #f0f0f0; }
.logbox .error { color:var(--err); }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1e293b; color:#fff; padding:9px 20px; border-radius:8px; opacity:0; transition:.3s; pointer-events:none; z-index:99; max-width:80%; }
#toast.show { opacity:1; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* SPU 自定义下拉 */
.spu-drop { position:relative; }
.spu-btn { border:1px solid var(--line); border-radius:6px; padding:6px 8px; display:flex; align-items:center; gap:8px; cursor:pointer; background:#fff; min-height:38px; }
.spu-btn img { width:30px; height:30px; object-fit:cover; border-radius:4px; background:#f1f5f9; }
.spu-list { display:none; position:absolute; left:0; right:0; top:100%; margin-top:2px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.15); z-index:30; }
.spu-list .spu-opt { display:flex; align-items:center; gap:8px; padding:5px 8px; cursor:pointer; font-size:13px; }
.spu-list .spu-opt:hover { background:#eef2ff; }
.spu-list .spu-opt img { width:32px; height:32px; object-fit:cover; border-radius:4px; background:#f1f5f9; flex:none; }
.spu-list .spu-opt.sel { background:#e0e7ff; }
form label { font-size:12px; color:var(--sub); display:block; }
form input, form select { width:100%; }
.status-150::after{content:"(待推送)"} .status-300::after{content:"(生产中)"} .status-350::after{content:"(已发货)"} .status-800::after{content:"(已关闭)"}

/* 绑定编辑弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 100; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 36px 16px; }
.modal { background: #fff; border-radius: 10px; max-width: 920px; width: 100%; padding: 16px 20px 18px; box-shadow: 0 10px 44px rgba(0,0,0,.22); }

/* 订单页: 左侧常驻菜单 (不随列表滚动) + 右侧列表 */
.ordwrap { display: flex; gap: 14px; align-items: flex-start; }
.ordside { flex: 0 0 208px; width: 208px; position: sticky; top: 66px; max-height: calc(100vh - 82px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ordside .side-t { font-size: 12px; color: var(--sub); margin: 12px 0 6px; font-weight: 600; }
.ordside .side-t:first-child { margin-top: 0; }
.ordside .side-btns { display: flex; flex-direction: column; gap: 6px; }
.ordside .side-btns button { width: 100%; text-align: center; }
.ordmain { flex: 1; min-width: 0; }

/* 宽屏订单表格: 列顺序 订单信息 / 订单状态及时间 / 商品信息 / 收货信息 / 物流信息 / 系统状态及时间 / 匹配产品信息 / 操作 */
.ordscroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.ordtable { table-layout: fixed; min-width: 1400px; }
.ordtable th { border-bottom: 2px solid #dbe2ec; background: #f8fafc; }
.ordtable th, .ordtable td { padding: 8px 10px; vertical-align: top; word-break: break-word; }
.ordtable th.center { text-align: center; }
/* 订单列表顶部筛选条(搜索框 + 批量操作条)固定在 header 下方, 列表滚动时从它下面穿过 */
.ordmain > .card.ordtop { position: sticky; top: 54px; z-index: 45; background: var(--card); box-shadow: 0 8px 18px -10px rgba(15,23,42,.35); }

/* 首次进入加载遮罩 (任务#25): 登录+拉单全程一个宽屏「加载中」, 拉单完成即隐藏 */
#loadmask { position: fixed; inset: 0; background: rgba(245,247,250,.92); z-index: 200; display: flex; align-items: center; justify-content: center; }
#loadmask .lm-box { text-align: center; padding: 40px 88px; min-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
#loadmask .lm-spin { width: 42px; height: 42px; margin: 0 auto 16px; border: 4px solid #dbe4f0; border-top-color: var(--pri); border-radius: 50%; animation: lm-rot .8s linear infinite; }
#loadmask .lm-txt { font-size: 16px; color: #334155; letter-spacing: 2px; }
@keyframes lm-rot { to { transform: rotate(360deg); } }