/* ===================================================================
   物料互换记账台 · 样式表
   移动端优先，桌面端自适应到 760px 居中
   =================================================================== */

:root{
  --brand:#39C5BB;
  --brand-d:#1f8e86;
  --brand-dd:#0b5f57;
  --bg:#f0faf9;
  --card:#ffffff;
  --ink:#0d2b28;
  --muted:#5f7c78;
  --line:#d9efec;
  --line-soft:#eaf7f5;
  --ok:#18915a;
  --warn:#c4761a;
  --danger:#d94343;
  --restore:#2f86f0;
  --purple:#6b3fd1;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(13,43,40,.05), 0 6px 18px -8px rgba(13,43,40,.16);
  --topbar-h:56px;
  --tabbar-h:58px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --page-max:760px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}

/* ==================== 登录 ==================== */
.gate{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(57,197,187,.35), transparent 70%),
    linear-gradient(160deg,#0b5f57 0%, #123c3a 100%);
}
.gate-box{
  width:100%;
  max-width:360px;
  background:var(--card);
  border-radius:22px;
  padding:30px 24px 22px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.5);
  text-align:center;
}
.gate-logo{display:flex;justify-content:center;margin-bottom:12px;filter:drop-shadow(0 6px 14px rgba(57,197,187,.5))}
.gate-title{margin:0;font-size:20px;font-weight:800;letter-spacing:.3px}
.gate-sub{margin:6px 0 22px;font-size:12.5px;color:var(--muted);letter-spacing:.6px}
.gate-form{display:flex;flex-direction:column;gap:10px}
.gate-box .gate-form input{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:16px;background:#f8fdfc;color:var(--ink);text-align:center;letter-spacing:1px;
}
.gate-form input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(57,197,187,.16)}
.gate-err{margin:12px 0 0;font-size:13px;color:var(--danger);background:#fdeaea;border-radius:8px;padding:8px 10px}
.gate-foot{margin:18px 0 0;font-size:11.5px;color:#9ab3b0;line-height:1.6}

/* ==================== 顶栏 ==================== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding:var(--safe-t) 14px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(120deg,var(--brand-dd) 0%, var(--brand) 100%);
  color:#fff;
  box-shadow:0 2px 14px rgba(11,95,87,.28);
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-logo{display:flex;flex:none}
.topbar-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.topbar-text strong{font-size:15.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-text small{font-size:11px;opacity:.78;letter-spacing:.5px}
.sync-dot{
  flex:none;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.16);border:none;color:#fff;
  padding:6px 11px;border-radius:20px;font-size:11.5px;font-weight:600;
  cursor:pointer;transition:background .18s;
}
.sync-dot:hover{background:rgba(255,255,255,.26)}
.sync-dot i{width:7px;height:7px;border-radius:50%;background:#8ff0d8;box-shadow:0 0 0 3px rgba(143,240,216,.25)}
.sync-dot.busy i{background:#ffd98f;animation:pulse 1s infinite}
.sync-dot.off i{background:#ff9b9b}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ==================== 主体 ==================== */
main{
  max-width:var(--page-max);
  margin:0 auto;
  padding:calc(var(--topbar-h) + var(--safe-t) + 14px) 14px
          calc(var(--tabbar-h) + var(--safe-b) + 20px);
}

.page{display:flex;flex-direction:column;gap:14px}

/* ==================== 卡片 ==================== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card-title{
  margin:0 0 12px;
  font-size:15.5px;font-weight:800;
  display:flex;align-items:center;gap:8px;
}
.card-title .ico{
  width:24px;height:24px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-d));
  color:#fff;border-radius:8px;font-size:13px;font-weight:700;
  box-shadow:0 3px 8px -2px rgba(31,142,134,.5);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head .card-title{margin:0}
.count-pill{
  flex:none;font-size:11.5px;font-weight:700;color:var(--brand-d);
  background:var(--line-soft);border-radius:20px;padding:3px 10px;
}

/* ==================== 表单 ==================== */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field-row{display:flex;gap:10px;margin-bottom:14px}
.field-row .field{flex:1;margin-bottom:0}
.field-sm{max-width:112px;flex:none}

label{
  display:block;font-size:12.5px;font-weight:700;color:var(--muted);
  margin-bottom:6px;letter-spacing:.2px;
}
label .req{color:var(--danger);font-weight:800}
label .opt{color:#a8bfbc;font-weight:600}

input[type=text],input[type=password],input[type=search],input[type=number],textarea,select{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:16px;              /* 16px 可避免 iOS 聚焦时自动放大 */
  font-family:inherit;
  background:#fbfefe;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none;appearance:none;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(57,197,187,.14);
}
input::placeholder,textarea::placeholder{color:#aac3c0}
textarea{
  resize:vertical;min-height:96px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;
}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

.search{margin-bottom:12px}

.hint{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.65}
.hint b{color:var(--brand-d)}

/* ==================== 按钮 ==================== */
.btn{
  border:none;border-radius:var(--radius-sm);
  padding:12px 18px;min-height:44px;
  font-size:15px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:transform .12s, background .18s, filter .18s, box-shadow .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;box-shadow:0 6px 16px -6px rgba(31,142,134,.65)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--line-soft);color:var(--brand-d)}
.btn-ghost:hover{background:#ddf3f0}
.btn-ok{background:var(--ok);color:#fff}
.btn-danger{background:#fdeaea;color:var(--danger)}
.btn-danger:hover{background:#fbdcdc}
.btn-restore{background:#e8f1fe;color:var(--restore)}
.btn-blue{background:var(--restore);color:#fff}
.btn-sm{padding:8px 14px;min-height:36px;font-size:13.5px;border-radius:9px}
.btn-mt{margin-top:10px}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-group .btn{flex:1;min-width:130px}

/* ==================== 折叠区 ==================== */
.fold{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.fold > summary{
  cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:700;color:var(--brand-d);
  padding:8px 0;display:flex;align-items:center;gap:6px;
  user-select:none;
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{
  content:"▸";font-size:11px;transition:transform .2s;display:inline-block;
}
.fold[open] > summary::before{transform:rotate(90deg)}
.fold > summary::after{content:"";flex:1}

/* ==================== 标签选择 ==================== */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chip{
  border:1px solid var(--line);background:#fbfefe;color:var(--muted);
  padding:8px 14px;border-radius:20px;
  font-size:13.5px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:.15s;
}
.chip:active{transform:scale(.96)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px -4px rgba(57,197,187,.8)}
.chips-filter .chip.active{background:var(--brand-d);border-color:var(--brand-d)}

/* ==================== 统计 ==================== */
.statgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.stat{
  background:var(--card);border-radius:var(--radius);padding:13px 10px;
  box-shadow:var(--shadow);text-align:center;
}
.stat .n{font-size:22px;font-weight:800;color:var(--brand-d);line-height:1.2;font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600}
.stat.warn .n{color:var(--warn)}

/* ==================== 列表 ==================== */
.list{display:flex;flex-direction:column;gap:10px}
.list-scroll{max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}

.item{
  display:flex;align-items:center;gap:12px;
  background:#fbfefe;border:1px solid var(--line-soft);
  border-radius:12px;padding:11px 13px;
}
.item-main{flex:1;min-width:0}
.item-title{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap;overflow-wrap:anywhere;word-break:break-word}
.item-no{
  flex:none;font-size:11px;font-weight:800;color:var(--brand-d);
  background:var(--line-soft);border-radius:6px;padding:1px 6px;
}
.item-sub{font-size:12px;color:var(--muted);margin-top:2px}
.item-qty{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.item-right{display:flex;align-items:center;gap:10px;flex:none}

.bar{height:6px;background:var(--line-soft);border-radius:4px;overflow:hidden;margin-top:6px}
.bar > i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--brand-d));transition:width .3s}
.bar.low > i{background:linear-gradient(90deg,#f0b96b,var(--warn))}
.bar.empty > i{background:#d9d9d9}

.empty{
  text-align:center;color:#a8bfbc;font-size:13.5px;
  padding:28px 12px;line-height:1.8;
}
.empty b{display:block;font-size:15px;color:var(--brand-d);margin-bottom:4px}

/* ==================== 步进器 ==================== */
.stepper{display:flex;align-items:center;gap:0;flex:none}
.step-btn{
  width:36px;height:36px;flex:none;
  border:1px solid var(--line);background:#fff;color:var(--brand-d);
  font-size:19px;font-weight:700;line-height:1;
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.step-btn:first-child{border-radius:9px 0 0 9px}
.step-btn:last-child{border-radius:0 9px 9px 0}
.step-btn:active{background:var(--line-soft)}
input.step-input{
  width:52px;height:36px;flex:none;text-align:center;
  border:1px solid var(--line);border-left:none;border-right:none;
  border-radius:0;font-size:16px;font-weight:700;
  padding:0;background:#fbfefe;color:var(--ink);
}
.step-input:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:none;z-index:1}
.step-input.on{background:#e9fbf9;color:var(--brand-dd)}

/* ==================== 记录卡 ==================== */
.rec{
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  background:#fff;transition:opacity .2s, background .2s;
}
.rec.done{background:#f7f8f9;opacity:.7}
.rec-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec-seq{
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-radius:7px;padding:2px 8px;
}
.rec.done .rec-seq{background:#b9c6c4}
.rec-cn{font-size:15px;font-weight:800;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.tag{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:11.5px;font-weight:700;
}
.tag-pending{background:#fff3e0;color:var(--warn)}
.tag-picked{background:#e4f6ec;color:var(--ok)}
.tag-edit{background:#efeaff;color:var(--purple)}
.rec-meta{
  font-size:12.5px;color:var(--ink);
  background:var(--line-soft);border-left:3px solid var(--brand);
  border-radius:0 7px 7px 0;padding:6px 10px;margin-top:7px;
  display:flex;flex-wrap:wrap;gap:2px 10px;
}
.rec-meta.gift{background:#eef4fe;border-left-color:var(--restore)}
.rec-meta b{font-weight:700}
.rec-time{font-size:11.5px;color:#9ab3b0;margin-top:7px}
.rec-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip-item{
  background:var(--line-soft);color:var(--brand-dd);
  border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:700;
}
.rec-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rec-acts .btn{flex:1;min-width:88px}

/* ==================== 提交条 ==================== */
.submit-bar{
  position:sticky;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px);
  z-index:15;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 8px 26px -10px rgba(13,43,40,.35);
}
.submit-sum{flex:1;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.4}
.submit-sum b{color:var(--brand-d);font-weight:800}
.submit-bar .btn{flex:none}

/* ==================== 键值行 ==================== */
.kv{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border-radius:12px;overflow:hidden;margin-bottom:12px}
.kv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:11px 13px;font-size:13.5px}
.kv-row span{color:var(--muted);font-weight:600}
.kv-row b{font-weight:700;font-variant-numeric:tabular-nums}

/* ==================== 日志 ==================== */
.loglist{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border-radius:12px;overflow:hidden;max-height:52vh;overflow-y:auto}
.logitem{background:#fff;padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
.logitem .lt{
  flex:none;font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px;
  background:var(--line-soft);color:var(--brand-d);
}
.logitem .lb{flex:1;min-width:0}
.logitem .ld{font-size:13px;line-height:1.55;word-break:break-word}
.logitem .ltime{font-size:11px;color:#a8bfbc;margin-top:3px;font-variant-numeric:tabular-nums}

/* ==================== 底部导航 ==================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 16px rgba(13,43,40,.07);
}
.tab{
  position:relative;
  border:none;background:transparent;color:#8ba7a4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:inherit;cursor:pointer;padding:6px 2px;
  transition:color .15s;
}
.tab-ico{font-size:19px;line-height:1;filter:grayscale(1) opacity(.55);transition:filter .18s, transform .18s}
.tab-txt{font-size:11px;font-weight:700;letter-spacing:.2px}
.tab.active{color:var(--brand-d)}
.tab.active .tab-ico{filter:none;transform:translateY(-1px)}
.tab.active::before{
  content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-d));
}
.tab-badge{
  position:absolute;top:5px;left:50%;margin-left:4px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--danger);color:#fff;
  border-radius:9px;font-size:10.5px;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;
}

/* ==================== Toast ==================== */
.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(-14px);
  top:calc(var(--topbar-h) + var(--safe-t) + 12px);
  z-index:90;
  max-width:min(480px, calc(100vw - 32px));
  background:rgba(13,43,40,.94);
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.55;
  padding:11px 16px;border-radius:12px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;
  white-space:pre-line;word-break:break-word;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:linear-gradient(135deg,#17845a,#18915a)}
.toast.err{background:linear-gradient(135deg,#b93030,#d94343)}

/* ==================== 弹窗 ==================== */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-mask{position:absolute;inset:0;background:rgba(9,32,30,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-box{
  position:relative;z-index:1;
  width:100%;max-width:340px;
  background:#fff;border-radius:18px;padding:20px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.5);
  animation:pop .2s ease-out;
}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-box h3{margin:0 0 10px;font-size:16px;font-weight:800}
.modal-box #modal-body{margin-bottom:18px}
.modal-box .modal-text{font-size:13.5px;color:var(--muted);line-height:1.75;white-space:pre-line;margin:0}
.modal-box #modal-body .field:last-of-type{margin-bottom:0}
.modal-box #modal-body .hint{margin-top:10px}
.modal-acts{display:flex;gap:8px}
.modal-acts .btn{flex:1;min-width:0;padding-left:6px;padding-right:6px;font-size:13.5px}

/* ==================== 桌面端 ==================== */
@media (min-width:620px){
  body{font-size:15px}
  .statgrid{grid-template-columns:repeat(3,1fr);gap:12px}
  .stat .n{font-size:26px}
  .topbar{padding-left:calc((100vw - var(--page-max))/2 + 14px);padding-right:calc((100vw - var(--page-max))/2 + 14px)}
  .tabbar{max-width:var(--page-max);margin:0 auto;border-radius:18px 18px 0 0;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .rec-acts .btn{flex:0 1 auto;min-width:104px}
  .list-scroll{max-height:400px}
}

@media (min-width:1024px){
  main{padding-left:0;padding-right:0}
}

/* ==================== 无障碍 / 减少动效 ==================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}