:root{
  --brand:#E4007F; --brand-d:#b8006a; --brand-l:#FFF0F8;
  --ink:#1b1b22; --mid:#5a5a6e; --soft:#8b8b9c;
  --line:#e6e6ee; --bg:#f5f6fa; --card:#fff;
  --ok:#0f9d58; --ok-l:#e8f6ee; --warn:#c97a00; --warn-l:#fff6e6;
  --danger:#d64545; --danger-l:#fdeded;
  --r:14px; --sh:0 1px 2px rgba(20,25,60,.05),0 8px 26px rgba(20,25,60,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
     color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
     stroke-linecap:round;stroke-linejoin:round}

/* ── 登入 ── */
#lock{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.lockbox{width:100%;max-width:340px;background:var(--card);border:1px solid var(--line);
         border-radius:20px;padding:32px 26px;box-shadow:var(--sh);text-align:center}
.lockbox .ic{color:var(--brand);margin-bottom:12px}
.lockbox h1{font-size:19px;margin-bottom:4px}
.lockbox p{color:var(--soft);font-size:13px;margin-bottom:20px}
.lockbox input{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);
               background:#fafafd;font-size:16px;text-align:center}
.lockbox input:focus{outline:none;border-color:var(--brand)}
.lockbox button{width:100%;margin-top:12px;padding:12px;border:0;border-radius:11px;
                background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
.err{color:var(--danger);font-size:13px;min-height:18px;margin-top:8px}

/* ── 外框 ── */
.wrap{max-width:none;margin:0;padding:0 28px 60px}   /* 全寬，左右不留大片空白 */
header{padding:18px 0 0}
.brandrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.logo{width:38px;height:38px;border-radius:11px;background:var(--brand-l);color:var(--brand);
      display:grid;place-items:center;flex:none}
h1.title{font-size:20px;letter-spacing:-.3px}
.sub{color:var(--soft);font-size:12.5px}
.sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--line);
     background:#fff;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600;
     color:var(--mid);white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.pink{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pink:hover{background:var(--brand-d);color:#fff}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.danger{color:var(--danger);border-color:transparent}
.btn.danger:hover{border-color:var(--danger);background:var(--danger-l)}
.btn:disabled{opacity:.5;pointer-events:none}

/* ── 分頁 ── */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);
      margin:16px 0 0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:none;padding:11px 15px;cursor:pointer;font-weight:700;color:var(--soft);
     border-bottom:2.5px solid transparent;white-space:nowrap;margin-bottom:-1px;font-size:14.5px}
.tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.page{display:none;padding-top:18px}
.page.on{display:block}

/* ── 搜尋 ── */
.searchbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:12px 0}
.sbox{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;
      padding:0 13px;background:#fff;box-shadow:var(--sh)}
.sbox:focus-within{border-color:var(--brand)}
.sbox .ico{color:var(--soft)}
.sbox input{flex:1;border:0;background:none;padding:13px 0;outline:none;font-size:16px;font-weight:600}
.iconbtn{border:0;background:none;color:var(--soft);cursor:pointer;padding:5px;display:inline-flex;border-radius:7px}
.iconbtn:hover{color:var(--brand);background:var(--brand-l)}

.chips{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;margin-top:9px;
       scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;
      cursor:pointer;font-size:13px;font-weight:700;color:var(--mid);white-space:nowrap}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── 膜料卡（查詢結果） ── */
.count{font-size:13px;color:var(--soft);margin:2px 4px 10px;font-weight:600}
.count b{color:var(--brand-d)}
.rolls{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.roll{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
      box-shadow:var(--sh);display:flex;flex-direction:column;gap:9px}
.roll .top{display:flex;align-items:flex-start;gap:9px}
.roll .model{font-size:17px;font-weight:800;letter-spacing:-.2px;flex:1;line-height:1.35}
.roll .brand{font-size:11.5px;background:var(--brand-l);color:var(--brand-d);border-radius:999px;
             padding:3px 9px;font-weight:700;white-space:nowrap}
.roll .box{font-size:12px;color:var(--soft)}
.big{display:flex;gap:10px}
.big > div{flex:1;background:#fafafd;border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.big .k{font-size:11px;color:var(--soft)}
.big .v{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.3}
.big .v.shelf{color:var(--brand)}
.big .v.m{color:var(--ink)}
.big .v.low{color:var(--danger)}
.roll .note{font-size:12.5px;color:var(--mid)}
.roll .acts{display:flex;gap:7px;margin-top:auto}
.roll .acts .btn{flex:1;justify-content:center}
.empty{text-align:center;color:var(--soft);padding:44px 12px;font-size:14px;line-height:1.9}

/* ── 表單 ── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
       padding:18px;box-shadow:var(--sh);margin-bottom:14px}
.panel h3{font-size:15px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.panel h3 .ico{color:var(--brand)}
.panel .hint{font-size:12.5px;color:var(--soft);margin-bottom:12px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:5px}
.f.wide{grid-column:1/-1}
.f label{font-size:11.5px;color:var(--soft);font-weight:600}
.f input,.f select,.f textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:#fafafd;font-size:16px;font-family:inherit}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.f .calc{font-size:12px;color:var(--brand-d);font-weight:700;min-height:16px}
.f input[readonly]{background:#f0f0f5;color:var(--mid)}

/* ── 紀錄表 ── */
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
           border-radius:var(--r);box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1000px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #f0f0f5;white-space:nowrap}
td.case{white-space:normal;min-width:240px;line-height:1.5}
th{background:#fafafd;font-size:12px;color:var(--mid);font-weight:800;position:sticky;top:0}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td .mini{border:0;background:none;color:var(--soft);cursor:pointer;padding:3px;border-radius:6px;display:inline-flex}
td .mini:hover{color:var(--brand);background:var(--brand-l)}
td .mini.del:hover{color:var(--danger);background:var(--danger-l)}
.chk{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.pill{font-size:11px;border-radius:999px;padding:2px 8px;font-weight:700}
.pill.ok{background:var(--ok-l);color:var(--ok)}
.pill.wait{background:var(--warn-l);color:var(--warn)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);
       color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;
       transition:.22s;z-index:120;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--danger)}

@media (max-width:600px){
  .wrap{padding:0 13px 50px}   /* 手機維持原本邊距 */
  h1.title{font-size:17px}
  .rolls{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .big .v{font-size:18px}
}

/* ── 列印空白表 ── */
@media print{
  body{background:#fff}
  .noprint,header,.tabs,.searchbar,.toast{display:none!important}
  .page{display:none!important}
  #printArea{display:block!important}
  @page{size:A4 landscape;margin:8mm}
}
#printArea{display:none}
#printArea h2{text-align:center;font-size:15pt;margin-bottom:2px}
#printArea .st{text-align:center;font-size:11pt;margin-bottom:6px}
#printArea .memo{font-size:8pt;margin-bottom:3px}
#printArea table{min-width:0;font-size:8.5pt}
#printArea th,#printArea td{border:1px solid #333;padding:3px 4px;text-align:center;white-space:normal}
#printArea th{background:#eee;font-size:8pt}
#printArea td{height:26px}

/* ── 編輯抽屜（固定右側滑出） ── */
.dbg{position:fixed;inset:0;background:rgba(16,14,24,.42);z-index:90;opacity:0;animation:dfade .18s forwards}
@keyframes dfade{to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:91;background:var(--card);
  border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(16,20,40,.16);
  transform:translateX(100%);animation:dslide .22s cubic-bezier(.22,.7,.3,1) forwards}
@keyframes dslide{to{transform:translateX(0)}}
.dhead{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.dhead b{font-size:16px;flex:1}
.dbody{flex:1;overflow-y:auto;padding:16px 18px}
.dfoot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fafafd}
.dbody .fields{grid-template-columns:1fr 1fr}
.dbody .f.wide{grid-column:1/-1}
@media(max-width:600px){.drawer{width:100vw;border-left:0}.dbody .fields{grid-template-columns:1fr}}

/* ── 名單管理 ── */
.linkbtn{border:0;background:none;color:var(--brand);font-size:11.5px;font-weight:700;
  cursor:pointer;margin-left:8px;text-decoration:underline;padding:0}
.slist{display:flex;flex-direction:column;gap:6px}
.srow{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fafafd;font-size:14px}
.srow .nm{flex:1;font-weight:600}
.srow .tag{font-size:11px;color:var(--soft);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:2px 8px}
.srow .x{border:0;background:none;color:var(--soft);cursor:pointer;padding:3px;border-radius:6px;display:inline-flex}
.srow .x:hover{color:var(--danger);background:var(--danger-l)}

/* ── 到貨（沿用紙本紅筆的意思） ── */
.panel.arrival{border-left:4px solid var(--danger)}
.btn.arr{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.arr:hover{background:#b83a3a;border-color:#b83a3a;color:#fff}
tr.arrival td{background:#fff8f8}
tr.arrival .kind{color:var(--danger);font-weight:800}
tr.arrival td.num b{color:var(--danger)}
.kindpill{font-size:11px;border-radius:999px;padding:2px 9px;font-weight:800;white-space:nowrap}
.kindpill.use{background:#eef0f5;color:var(--mid)}
.kindpill.arr{background:var(--danger-l);color:var(--danger)}

/* ── 表單頁置中：卡片和表格要全寬，但輸入框拉到 1900px 很難看 ── */
#p-use .panel, #p-arr .panel{max-width:920px;margin-left:auto;margin-right:auto}
#p-use .panel h3, #p-arr .panel h3{justify-content:center}
#p-use .panel .hint, #p-arr .panel .hint{text-align:center}
#p-use .panel > div[style*="display:flex"], #p-arr .panel > div[style*="display:flex"]{justify-content:center}
@media (max-width:600px){
  #p-use .panel, #p-arr .panel{max-width:none}
  #p-use .panel h3, #p-arr .panel h3{justify-content:flex-start}
  #p-use .panel .hint, #p-arr .panel .hint{text-align:left}
}

/* ── 有新版的提示條 ── */
.updbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:#fff;border-radius:999px;padding:10px 12px 10px 20px;
  display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.28);max-width:92vw}
.updbar button{border:0;background:var(--brand);color:#fff;font-weight:800;font-size:13.5px;
  padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.updbar button:hover{background:#ff2a95}