/* 蝦皮貼單系統 — 深圳倉風格(暖色咖啡 + 左側選單 + 單頁App) */
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#1f140c;--sub:#7a5040;--rust:#c8360a;--rust-d:#a52d08;--coffee:#211712;--cream:#f6f1e9;--card:#fff;--line:#ece2d4;--gold:#c9a84c;--amber:#d97706;--green:#1f9d57;--blue:#1e3a5f;--red:#c8360a}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang TC','PingFang SC','Microsoft JhengHei',sans-serif;background:var(--cream);color:var(--ink);font-size:14px}
.hide{display:none!important}

/* 登入 */
#loginScreen{position:fixed;inset:0;background:var(--coffee);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.login-card{background:#fff;border-radius:18px;padding:36px 28px;width:100%;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.3);text-align:center}
.login-logo{font-size:24px;font-weight:800;color:var(--ink)}
.login-sub{font-size:13px;color:var(--sub);margin-top:4px;margin-bottom:24px}
.err-msg{color:var(--red);font-size:13px;margin-top:10px;min-height:18px}

/* 通用元件 */
input[type=text],input[type=number],input[type=password],input[type=month],input[type=date],select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;outline:none;background:#fff;-webkit-appearance:none;font-family:inherit;transition:border-color .12s}
input:focus,select:focus,textarea:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(200,54,10,.08)}
label{display:block;font-size:13px;color:var(--sub);margin:12px 0 6px;font-weight:600}
.btn{padding:13px;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;display:inline-block;background:var(--rust);color:#fff}
.btn:disabled{background:#cbb8a8}
.btn-block{width:100%;margin-top:14px}
.btn-gray{background:#b3a292} .btn-blue{background:var(--blue)} .btn-green{background:var(--green)} .btn-amber{background:var(--amber)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:8px;border:none;cursor:pointer;font-weight:700;background:var(--rust);color:#fff}
.btn-ghost{background:#fff;border:1.5px solid var(--rust);color:var(--rust)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px;box-shadow:0 2px 10px rgba(40,20,8,.05)}
.card-title{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:14px;overflow:hidden}
.row{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.tag-rust{background:#fbeee7;color:#a52d08}.tag-blue{background:#e8eef6;color:#1e3a5f}.tag-amber{background:#fef3e2;color:#b45309}.tag-green{background:#e7f7ee;color:#15803d}.tag-gray{background:#f0ebe4;color:#7a5040}
.muted{color:var(--sub);font-size:13px}
.success-box{background:#e7f7ee;color:#15803d;padding:13px;border-radius:11px;margin-top:12px;border:1px solid #c9ecd8;font-size:14px}
.error-box{background:#fdecea;color:#a8210f;padding:12px;border-radius:11px;margin-top:12px;border:1px solid #f5cdc4;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f8f3ec;padding:9px 11px;text-align:left;font-weight:700;color:var(--sub);border-bottom:1.5px solid var(--line);white-space:nowrap}
td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:#fbf8f3}
.table-wrap{overflow-x:auto;border-radius:10px}
.img-thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{background:#fbf7f1;border:1px solid var(--line);border-radius:11px;padding:13px 15px;text-align:center}
.kpi .k{font-size:12px;color:var(--sub)} .kpi .v{font-size:30px;font-weight:800;margin-top:4px;color:var(--ink)}
.kpi .v.hot{color:var(--rust)} .kpi .v.warm{color:var(--amber)}

/* 側邊選單 App 殼 */
.side{width:210px;background:var(--coffee);color:#dcc8b8;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:10}
.side-logo{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-logo .b{font-size:16px;font-weight:800;color:#fff;letter-spacing:1px}
.side-logo .s{font-size:11px;color:#b89a86;margin-top:2px}
.nav{flex:1;padding:8px 0;overflow:auto}
.nav-sec{font-size:10px;color:#97785f;text-transform:uppercase;letter-spacing:1px;padding:12px 18px 5px}
.tab{display:flex;align-items:center;gap:10px;width:100%;padding:11px 18px;cursor:pointer;font-size:14px;color:#dcc8b8;background:none;border:none;border-left:3px solid transparent;text-align:left;font-family:inherit}
.tab .ic{width:18px;text-align:center;flex-shrink:0}
.tab .badge{margin-left:auto;background:var(--rust);color:#fff;font-size:11px;font-weight:700;padding:1px 8px;border-radius:10px}
.tab:hover{background:rgba(255,255,255,.05)}
.tab.active{background:rgba(200,54,10,.18);color:#fff;border-left-color:var(--rust);font-weight:700}
.side-foot{padding:11px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;font-size:12px;color:#b89a86}
.logout-btn{margin-left:auto;background:rgba(255,255,255,.12);border:none;color:#fff;padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12px}
.top{height:52px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;position:sticky;top:0;z-index:5;margin-left:210px}
.crumb{font-size:15px;color:var(--sub)} .crumb b{color:var(--ink);font-weight:800}
.container{margin-left:210px;padding:20px 22px;max-width:1080px}
.panel{display:none} .panel.active{display:block}
.pagehd{font-size:20px;font-weight:800;margin-bottom:3px}
.pagesub{font-size:13px;color:var(--sub);margin-bottom:16px}

/* 刷貨大畫面(工人用) — 滿版置中 */
.scan-wrap{max-width:720px;margin:0 auto;padding:16px}
.scan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.scan-top .who{font-size:15px;font-weight:700;color:var(--ink)}
.scan-pad{width:100%;max-width:680px;margin:0 auto}
.scan-modes{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}
.autoprint-lbl{display:block;text-align:center;margin:14px 0 18px;font-size:14px;color:var(--sub)}
.scan-input{display:block;width:100%;box-sizing:border-box;font-size:28px;padding:24px 20px;text-align:center;border:2px solid var(--rust);border-radius:16px}
/* 工人畫面:滿版、刷碼區垂直置中 */
#workerView{min-height:100vh}
#workerView .scan-wrap{min-height:100vh;display:flex;flex-direction:column;box-sizing:border-box}
#workerView #workerScan{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:10px 0}
.result{border-radius:16px;padding:26px 20px;margin-top:16px;text-align:center;color:#fff}
.result .tag-big{font-size:40px;font-weight:900;letter-spacing:2px}
.result .sub{margin-top:8px;font-size:16px;opacity:.95}
.r-print{background:#15803d}.r-nolabel{background:var(--amber)}.r-none{background:var(--rust)}.r-dup{background:var(--blue)}
.result .meta{background:rgba(255,255,255,.14);border-radius:10px;padding:12px;margin-top:14px;text-align:left;font-size:14px;line-height:1.8}
.big-btn{font-size:20px;padding:16px;border:none;border-radius:12px;font-weight:800;cursor:pointer;color:#fff}
.upload-area{border:2px dashed #d8cab8;border-radius:11px;padding:18px;text-align:center;cursor:pointer;background:#fbf7f1;margin-top:10px;color:var(--sub)}
/* 緊湊表單:標籤在上、欄位自動排成整齊網格(取代一堆小框擠一行亂折) */
.fldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px 12px;align-items:end}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>span{font-size:12px;color:var(--sub);font-weight:600}
.fldrow input,.fldrow select{padding:9px 11px;font-size:14px}
.fld-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.card-sub{font-size:12.5px;color:var(--sub);margin:-6px 0 14px;line-height:1.5}
.hr{border:none;border-top:1px solid var(--line);margin:16px 0}
details.foldcard>summary{cursor:pointer;font-size:13px;color:var(--sub);font-weight:600;list-style:none;padding:4px 0}
details.foldcard>summary::-webkit-details-marker{display:none}
details.foldcard>summary::before{content:'▸ ';color:var(--rust)}
details.foldcard[open]>summary::before{content:'▾ '}
@media(max-width:820px){.side{width:56px}.side-logo .s,.nav-sec,.tab .lb,.side-foot span{display:none}.top,.container{margin-left:56px}.tab{justify-content:center;padding:13px 0}}