/* 家庭书架 · 与主站共用 :root 变量，不另造一套视觉语言。
   触控优先：所有可点区域最小高度 44px；不做仪表盘，不做自动弹窗。 */

.hs-wrap{padding-bottom:24px}

/* 实体书架工作页：先选架，再看这一层，最后录书。 */
.hs-shelf-work,.hs-layer-work{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--surface);box-shadow:var(--shadow)}
.hs-work-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.hs-work-top h2,.hs-layer-work h2{margin:5px 0 4px;font-size:24px;letter-spacing:-.04em}.hs-work-top p,.hs-layer-work p{margin:0;color:var(--sub);font-size:13px;line-height:1.6}.hs-overline{font-size:11px;font-weight:750;letter-spacing:.11em;color:var(--accent)}
.hs-zone-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 10px}.hs-zone,.hs-rack-no{min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-weight:650;cursor:pointer}.hs-zone.on,.hs-rack-no.on{background:var(--accent);border-color:var(--accent);color:#fff}
.hs-rack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.hs-rack-no{min-height:44px;font-variant-numeric:tabular-nums}
.hs-layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.hs-layer-card{position:relative;text-align:left;min-height:105px;padding:14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#fffdf9,#f8f3eb);color:var(--ink);font:inherit;cursor:pointer}.hs-layer-card span,.hs-layer-card small{display:block;color:var(--sub);font-size:12px}.hs-layer-card strong{display:block;font-size:22px;letter-spacing:-.04em;margin:8px 0 5px;font-variant-numeric:tabular-nums}.hs-layer-card i{position:absolute;right:11px;bottom:8px;color:#ad9b87;font-size:22px;font-style:normal}
.hs-quiet-actions{display:flex;justify-content:center;gap:18px;margin:13px 0 0}.hs-quiet-actions button{min-height:44px;padding:8px 2px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.hs-inner-back{min-height:44px;margin:0 0 8px}.hs-layer-actions{display:flex;gap:9px;margin-top:16px}.hs-layer-actions .hs-act{min-height:48px}.hs-books-on-layer{margin-top:14px}.hs-books-on-layer .hs-overline{padding:0 3px 8px}.hs-book-on-layer{padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:var(--surface);margin-top:8px;box-shadow:var(--shadow)}.hs-book-on-layer-main{display:flex;align-items:center;justify-content:space-between;gap:12px}.hs-book-on-layer strong,.hs-book-on-layer span{display:block}.hs-book-on-layer strong{font-size:15px}.hs-book-on-layer span{margin-top:4px;color:var(--sub);font-size:12px}.hs-layer-manage{flex:none;min-width:56px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--accent);font:inherit;font-size:13px;font-weight:650}.hs-layer-book-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.hs-layer-book-actions button{flex:1;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600}.hs-layer-book-actions button:first-child{color:var(--accent)}.hs-layer-manage:focus-visible,.hs-layer-book-actions button:focus-visible,.hs-rack-no:focus-visible,.hs-layer-card:focus-visible{outline:3px solid rgba(154,52,18,.28);outline-offset:2px}

/* 主动作：只放两件事 —— 找书（搜索）与归架 */
.hs-acts{display:flex;gap:10px;margin:10px 0 12px}
.hs-act{flex:1;min-height:52px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--ink);box-shadow:var(--shadow)}
.hs-act.main{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 4px 14px rgba(154,52,18,.25)}
.hs-act:active{transform:translateY(1px)}
.hs-act .ico{font-size:16px;opacity:.9}

.hs-search{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:0 12px;height:46px}
.hs-search input{flex:1;border:none;outline:none;background:none;font-size:16px;min-width:0;
  -webkit-text-size-adjust:100%}
.hs-search input::placeholder{font-size:13.5px;color:var(--sub)}
.hs-search .clr{color:var(--sub);font-size:16px;padding:0 2px}

.hs-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;
  color:var(--sub);font-size:12.5px;margin:10px 2px 8px}
.hs-meta .u{color:var(--accent);font-weight:600}

.hs-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;margin-bottom:9px;box-shadow:var(--shadow)}
.hs-title{font-size:15px;font-weight:600;line-height:1.42}
.hs-sub{color:var(--sub);font-size:12.5px;margin-top:3px}
.hs-copies{margin-top:9px;display:flex;flex-direction:column;gap:8px}
.hs-cp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;
  border-top:1px dashed var(--line);padding-top:8px}
.hs-cp:first-child{border-top:none;padding-top:0}
.hs-badge{padding:4px 9px;border-radius:9px;font-size:12.5px;white-space:nowrap}
.hs-badge.on{background:var(--ok-soft);color:var(--ok)}
.hs-badge.pending{background:var(--chip);color:var(--sub)}
.hs-badge.loaned{background:#fbeaea;color:var(--danger)}
.hs-cid{color:var(--sub);font-size:11.5px;font-family:ui-monospace,monospace}
.hs-btns{margin-left:auto;display:flex;gap:6px}
.hs-btn{padding:8px 11px;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;min-height:36px;white-space:nowrap}
.hs-btn.main{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-2);font-weight:600}
.hs-btn.warn{color:var(--danger);border-color:#f0d8d8}
.hs-btn:disabled{opacity:.45}

/* 层选择：底部面板，三步但每步都看得见 */
.hs-sheet{position:fixed;inset:0;background:rgba(32,26,21,.42);z-index:60;display:flex;
  align-items:flex-end;justify-content:center}
.hs-sheet-in{width:100%;max-width:760px;background:var(--surface);border-radius:18px 18px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(32,26,21,.18)}
.hs-sh-title{font-size:15px;font-weight:600;margin-bottom:4px}
.hs-sh-sub{color:var(--sub);font-size:12.5px;margin-bottom:12px}
.hs-sh-label{color:var(--sub);font-size:12px;margin:10px 0 6px}
.hs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.hs-cell{padding:12px 0;text-align:center;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:14px;min-height:48px}
.hs-cell.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.hs-cell.full{opacity:.45}
.hs-cell small{display:block;font-size:10.5px;opacity:.75}
.hs-sh-foot{display:flex;gap:10px;margin-top:14px}
.hs-sh-foot .hs-act{min-height:48px}

.hs-empty{color:var(--sub);text-align:center;padding:38px 12px;font-size:13.5px;line-height:1.7}
.hs-foot{margin-top:18px;color:var(--sub);font-size:12.5px;display:flex;gap:16px;
  justify-content:center;flex-wrap:wrap}
.hs-foot span{color:var(--accent)}

.hs-pick{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--line);
  padding-top:8px;font-size:13px}
.hs-pick .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-sel{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:13px;min-height:38px}

@media (max-width:380px){
  .hs-grid{grid-template-columns:repeat(4,1fr)}
  .hs-acts{gap:8px}
  .hs-act{font-size:14px}
}
@media (max-width:560px){.hs-shelf-work,.hs-layer-work{padding:16px}.hs-work-top h2,.hs-layer-work h2{font-size:22px}.hs-layer-grid{gap:7px}.hs-layer-card{min-height:96px;padding:12px}.hs-layer-card strong{font-size:20px}.hs-quiet-actions{justify-content:space-between;gap:8px}.hs-layer-actions{gap:8px}}

/* 窄屏：这套样式本来就是「2 个 tab 一行」，第 5 个若只剩半宽，看起来像多出来的半个。
   所以让「家里书架」独占一整行 —— 读起来是一条独立的入口条，而不是 5 个并列的分页。 */
@media (max-width:560px){
  #tab-shelf{flex:0 0 100%}
}

/* 扫码（C4）：视频全宽、对准提示浮在上层，不做花哨扫描框 */
#hs-cam{position:relative;width:100%;border-radius:14px;overflow:hidden;background:#201a15}
#hs-cam.scan-confirmed{animation:hs-scan-confirm .24s ease-out}
@keyframes hs-scan-confirm{0%{box-shadow:0 0 0 4px #38a866}100%{box-shadow:0 0 0 0 transparent}}
#hs-cam video{width:100%;display:block;height:34vh;min-height:240px;max-height:52vh;
  object-fit:cover;background:#201a15}
#hs-cam-mask{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;color:#fff;font-size:12.5px;
  background:linear-gradient(transparent,rgba(32,26,21,.72))}
/* 相机起不来时，这块黑框本来就是空的 —— 把「为什么、怎么办」写在这儿，
   等于零成本：框下面立刻省出两个按钮的位置，而老板的眼睛本来就在这块黑框上。 */
#hs-cam-mask.tall{top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;font-size:14px;line-height:1.75;white-space:pre-line;
  background:rgba(32,26,21,.82)}


/* 找书结果：位置是老板第一眼要找的信息，给它足够的视觉权重。
   17px/700 是量出来的：13px/400（继承 .hs-cp）在 402px 宽下要凑近看。 */
.hs-where{font-size:17px;font-weight:700;color:var(--ink);line-height:1.3}

/* ---------------- 扫码页：相机第一屏 ----------------
   老板的原话：「扫码应该一直打开，而不是点击按钮」。所以这一页的顺序是
   窄状态条 → 相机 → 结果 → 工具 → 折叠区。
   旧版把「先选一层」整块和「还没盘 20 个层名」堆在相机上面，把相机顶到了 677px
   —— 手机第一屏（约 700px）根本看不到，点「开始扫码」屏幕上方一个字不变，
   老板的感受就是「点了什么都没发生」。 */
#hs-cam-slot{min-height:240px}
.hs-cam-top{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:12.5px;color:var(--sub)}
.hs-cam-loc{font-weight:600;color:var(--ink)}
.hs-cam-pg{margin-left:auto}
.hs-mini{padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-size:12.5px;min-height:36px;color:var(--ink)}
.hs-cam-big{width:100%;min-height:62px;border-radius:14px;border:none;background:var(--accent);
  color:#fff;font-size:17px;font-weight:700;margin:2px 0 6px;
  box-shadow:0 4px 14px rgba(154,52,18,.25)}
.hs-cam-ok{text-align:center;color:var(--sub);font-size:12.5px;margin:6px 0 2px}
.hs-msgline{color:var(--accent-2);font-size:13px;line-height:1.5;margin:4px 2px 6px}
.hs-fold{margin:10px 0;border-top:1px dashed var(--line);padding-top:6px}
.hs-fold>summary{font-size:13px;color:var(--accent);font-weight:600;min-height:38px;
  display:flex;align-items:center;cursor:pointer}
.hs-acts.slim{min-height:0;margin:0 0 8px}
.hs-acts.slim .hs-back{flex:1;min-height:38px;display:flex;align-items:center;
  justify-content:center;font-size:13.5px;color:var(--accent);font-weight:600}