/* ─────────────────────────────────────────────────────────────
   mobile.css · 手机端原型共享样式
   暗色"仪器 + 书卷"语言：近黑底 + 1px 冷描边 + 衬线书名 + 等宽数字
   ───────────────────────────────────────────────────────────── */
:root {
  --bg:        #0a0c10;
  --surface:   #12151b;
  --surface-2: #171b22;
  --line:      #1f242c;
  --line-2:    #2a303a;
  --ink:       #e7eaef;
  --ink-2:     #99a1ad;
  --ink-3:     #646c78;
  --accent:    #f5a524;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans:  system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* 胶片颗粒：给纯暗底一点质感 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ═══════ 手机外壳（桌面打开时居中成机型；iframe 内自动铺满）═══════ */
.app {
  position: relative; width: 100%; max-width: 430px; margin: 0 auto;
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, #151a24 0%, rgba(10,12,16,0) 62%),
    var(--bg);
}
@media (min-width: 520px) {
  body { padding: 26px 0; background: #05070a; }
  .app {
    height: min(860px, calc(100dvh - 52px));
    border: 1px solid #1b212b; border-radius: 40px;
    box-shadow: 0 50px 110px -40px #000, 0 0 0 9px #0c0f14, 0 0 0 10px #1b212b;
  }
}

/* ═══════ AppBar ═══════ */
.appbar {
  position: relative; z-index: 20; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 15px 16px 12px;
  background: linear-gradient(180deg, rgba(10,12,16,.94), rgba(10,12,16,.72));
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--line);
}
.ab-title {
  flex: 1; margin: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0;
  font: 600 16px/1 var(--sans); color: #eef1f5; letter-spacing: .02em;
}
.ab-title small { font: 500 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.ab-back {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: #151a22; border: 1px solid #232a34; transition: transform .15s;
}
.ab-back:active { transform: scale(.93); }
.ab-back svg { width: 17px; height: 17px; fill: none; stroke: #cdd3dc; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-right { display: flex; align-items: center; gap: 7px; }

/* ═══════ 屏幕内容 ═══════ */
.screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 26px; }
.screen::-webkit-scrollbar { width: 0; }

/* ═══════ TabBar ═══════ */
.tabbar {
  flex: 0 0 auto; display: flex; border-top: 1px solid var(--line);
  background: rgba(10,12,16,.88); backdrop-filter: blur(18px);
  padding: 7px 0 calc(7px + env(safe-area-inset-bottom));
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
       color: var(--ink-3); font: 600 10px/1 var(--sans); letter-spacing: .06em; transition: color .18s; }
.tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--accent); }
.tab.on svg { filter: drop-shadow(0 0 7px rgba(245,165,36,.45)); }

/* ═══════════════════ 四层指纹卡 ═══════════════════
   4:1 横版：顶行作者名牌+type chips / 中部 prose 九宫格 + metrics 四线 + 书名 + 相似度 /
   底部 profile 22 色条 / 背景 emotion 9 色漂移色带 */
.fp {
  --cell: 10px; --gap: 1px; --mw: 10px; --tfs: 15.5px; --cfs: 9px; --prof: 3px;
  position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 1;
  display: flex; flex-direction: column; overflow: hidden;
  background: #12151b; border: 1px solid #242a34; border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px -18px #000;
}
/* 背景层：全宽容器，渐变自身留出左侧透明区（名义色带区在右侧 62%） */
.fp-emo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .8; }
.fp-band {
  position: absolute; inset: -44px 0; display: block; will-change: transform;
  /* emotion 色带漂移动效：暂时关闭（恢复时改回 fpDrift 6.4s ease-in-out infinite alternate） */
  animation: none;
}
@keyframes fpDrift {
  from { transform: translateX(calc(-1 * var(--amp, 13px))); }
  to   { transform: translateX(var(--amp, 13px)); }
}

.fp-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 5px; }
.fp-author {
  flex: 0 0 auto; max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 10px/1 var(--sans); letter-spacing: .02em; color: #16181d;
  padding: 4px 14px 4px 8px; border-top-left-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #e9ebef 34%, #ffffff 50%, #c9ccd2 64%, #f1f2f4 100%);
  border: 1px solid #b9bdc4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.18);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.fp-author.null { color: #6b7280; font-weight: 500; }
.fp-chips { display: flex; gap: 3px; margin-left: auto; margin-top: 4px; min-width: 0; overflow: hidden; }
.fp-chip {
  flex: 0 1 auto; min-width: 0; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--cfs)/1 var(--sans); padding: 3.5px 6px; border-radius: 999px;
}

.fp-mid { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-top: -1px; }
.fp-left { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap); }
.fp-prose { display: grid; grid-template-columns: repeat(3, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); }
.fp-prose > i { display: block; border: 1px solid #000; }
.fp-metrics {
  display: flex; gap: var(--gap); height: calc(3 * var(--cell) + 2 * var(--gap));
  width: calc(4 * var(--mw) + 3 * var(--gap)); border: 1px solid #2d3138; background: #0d1015;
}
.fp-metrics.miss { opacity: .38; }
.fp-mline { width: var(--mw); display: flex; flex-direction: column; overflow: hidden; }
.fp-mline .t { background: rgba(245,245,245,.38); }   /* 上白下色，分界位置 = 分值 */
.fp-mline .b { flex: 1; }

.fp-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; }
.fp-title > span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--tfs)/1.2 var(--serif); letter-spacing: .01em; color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.8);
}
.fp-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fp-side b { font: 700 13px/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(0,0,0,.9); }
.fp-side small { font: 500 8px/1 var(--sans); color: var(--ink-2); letter-spacing: .1em; }
.fp-side--t {
  font: 700 10px/1 var(--sans); letter-spacing: .1em; color: var(--accent);
  background: rgba(245,165,36,.1); border: 1px solid rgba(245,165,36,.45);
  padding: 5px 7px; border-radius: 6px;
}
.fp-prof { position: absolute; left: 0; right: 0; bottom: 0; height: var(--prof); z-index: 3; }

/* 目标卡：琥珀左边条 + 暖色描边外发光 */
.fp--target { border-color: #453a1d; box-shadow: 0 0 0 1px rgba(245,165,36,.16), 0 14px 30px -20px rgba(245,165,36,.55); }
.fp--target::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 4;
  background: linear-gradient(180deg, #ffc85c, #8a5a10);
}
/* 结果卡：按压反馈 */
.fp--result { transition: transform .16s ease, border-color .16s ease; }
.fp--result:active { transform: scale(.985); border-color: #333b47; }

/* 详情页大卡：同构放大 */
.fp--detail {
  --cell: 20px; --gap: 2px; --mw: 20px; --tfs: 19px; --cfs: 11px; --prof: 5px;
  aspect-ratio: auto; height: auto; padding: 13px 14px 17px; gap: 11px; border-radius: 15px;
}
.fp--detail .fp-top { padding-right: 0; }
.fp--detail .fp-author { font-size: 12px; padding: 6px 18px 6px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%); }
.fp--detail .fp-chip { font-size: 11px; padding: 5px 9px; max-width: 130px; }
.fp--detail .fp-emo { opacity: .55; }   /* 大卡色带面积大，压暗以免糊住书名 */
/* 大卡改为两行：书名整宽在上，指纹图在下（避免窄屏标题被截） */
.fp--detail .fp-mid { flex-direction: column; align-items: stretch; gap: 11px; padding: 0; margin: 0; }
.fp--detail .fp-title { order: -1; }
.fp--detail .fp-title > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.34; }
.fp--detail .fp-left { align-self: flex-start; }

/* ═══════ 通用区块 ═══════ */
.sec { margin-bottom: 14px; }
.sec-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 9px; }
.sec-h h2 { margin: 0; font: 600 13px/1 var(--sans); letter-spacing: .05em; color: #cfd5de; }
/* 区块右上角 tag：该层实际分析的文本范围（前 N 万字 / 全书）
   默认隐藏；把 detail.html 里的 SHOW_SCOPE_TAG 变量改成 true 即启用 */
.sec-h .src {
  display: none;
  margin-left: auto; font: 500 9.5px/1 var(--sans); color: #7c848f; letter-spacing: .02em;
  border: 1px solid #262c36; background: rgba(255,255,255,.02);
  padding: 4px 7px; border-radius: 999px;
}
body.show-scope-tag .sec-h .src { display: inline; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.panel.tight { padding: 10px 12px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 16px 2px 10px;
           font: 600 10px/1 var(--mono); color: #5f6773; letter-spacing: .12em; }
.divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #232830, transparent); }
.meta-bar { display: flex; align-items: center; gap: 8px; padding: 0 2px 11px; font: 500 11px/1.5 var(--sans); color: var(--ink-3); }
.meta-bar b { color: var(--ink-2); font-weight: 600; }
.note { font: 500 10px/1.7 var(--sans); color: #5a6270; }

.btn {
  font: 600 11px/1 var(--sans); color: #cdd3dc; background: #1a1f28;
  border: 1px solid #2a303a; padding: 8px 12px; border-radius: 9px; transition: transform .14s, background .16s;
}
.btn:active { transform: scale(.96); }
.btn.primary { background: rgba(245,165,36,.13); border-color: rgba(245,165,36,.4); color: var(--accent); }
.btn.icon { padding: 8px 9px; }

/* ═══════ 页面1 · 相似查询 ═══════ */
.qbar {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 14px;
  background: linear-gradient(180deg, #161b24, #12151b); border: 1px solid #232935; border-radius: 13px;
}
.qbar .qmark { width: 3px; align-self: stretch; border-radius: 3px; background: linear-gradient(180deg, #ffc85c, #8a5a10); }
.qbar .qt { flex: 1; min-width: 0; }
.qbar .qt b { display: block; font: 600 13px/1.35 var(--serif); color: #eef1f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbar .qt small { font: 500 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.fp-list { display: flex; flex-direction: column; gap: 9px; }

/* ═══════ 页面2 · 详情 ═══════ */
.hero { padding: 4px 2px 0; }
.hero h2 { margin: 0 0 10px; font: 600 25px/1.3 var(--serif); letter-spacing: .01em; color: #f2f4f7; }
.hero .by { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--sans); color: var(--ink-2); }
.hero .by .dot { width: 3px; height: 3px; border-radius: 50%; background: #4a5058; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.stat b { display: block; font: 700 17px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font: 500 10px/1 var(--sans); color: var(--ink-3); letter-spacing: .06em; }
.desc { font: 400 13px/1.85 var(--sans); color: #b3bac4; }
.desc.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.more { margin-top: 9px; font: 600 11px/1 var(--sans); color: var(--accent); }

/* type 标签云 */
.trow { display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid #1a1f27; }
.trow:first-child { border-top: 0; padding-top: 2px; }
.tk { flex: 0 0 30px; font: 600 10px/18px var(--sans); color: var(--ink-3); letter-spacing: .08em; }
.tlist { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font: 600 11px/1 var(--sans); padding: 5px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); color: var(--c);
}
.tag.on { border-color: transparent; }
.tag.muted { color: #5a626d; border-color: #262b34; }

/* ── 雷达图（客观指标 / 情绪强度 / 文笔 / 阅读画像共用）── */
.radar { display: flex; justify-content: center; }
.radar svg { width: 100%; max-width: 336px; height: auto; display: block; overflow: visible; }
.radar-cap { margin-top: 2px; text-align: center; font: 500 10.5px/1.7 var(--sans); color: var(--ink-3); }
.radar-cap b { font-weight: 600; }

/* metrics：11 项原始值清单 */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 14px;
         padding-top: 14px; border-top: 1px solid #1a1f27; }
.mrow { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.mrow i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 2px; }
.mrow span { font: 500 11px/1 var(--sans); color: #98a0ac; }
.mrow em { margin-left: auto; font: 600 10.5px/1 var(--mono); font-style: normal; color: #cdd3de;
           font-variant-numeric: tabular-nums; }

/* profile：四组图例 */
.pglegend { margin-top: 14px; border-top: 1px solid #1a1f27; }
.pgrow { display: grid; grid-template-columns: 8px auto 1fr 26px; align-items: center; gap: 8px;
         padding: 9px 0; border-top: 1px solid #161a21; }
.pgrow:first-child { border-top: 0; padding-top: 10px; }
.pgrow > i { width: 8px; height: 8px; border-radius: 50%; }
.pgrow b { font: 600 11.5px/1 var(--sans); color: #cfd5de; }
.pgrow .pbar { height: 5px; border-radius: 999px; background: #191d25; overflow: hidden; }
.pgrow .pbar u { display: block; height: 100%; border-radius: 999px; }
.pgrow em { font: 600 11px/1 var(--mono); font-style: normal; color: var(--ink-2); text-align: right;
            font-variant-numeric: tabular-nums; }
.pgrow small { grid-column: 2 / -1; margin-top: 5px; font: 500 9px/1.55 var(--sans); color: #5f6773; }

/* CP / 双条 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo .d { background: #141821; border: 1px solid var(--line); border-radius: 12px; padding: 11px; }
.duo .d b { display: block; font: 600 10px/1 var(--sans); color: var(--ink-3); letter-spacing: .1em; }
.duo .d em { display: block; margin: 7px 0 9px; font: 700 20px/1 var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }
.duo .d i { display: block; height: 4px; border-radius: 999px; background: #191d25; overflow: hidden; }
.duo .d u { display: block; height: 100%; }

/* 列表：角色 / 伏笔 */
.li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #1a1f27; }
.li:first-child { border-top: 0; padding-top: 2px; }
.li .lname { font: 600 13px/1.3 var(--serif); color: #e9ecf1; }
.li .lsub { font: 500 10px/1.4 var(--sans); color: var(--ink-3); }
.li .lval { margin-left: auto; font: 600 12px/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.badge { font: 600 9px/1 var(--sans); padding: 4px 7px; border-radius: 6px; letter-spacing: .06em; }

/* 时间线 */
.tl { position: relative; padding-left: 19px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 10px; width: 1px;
              background: linear-gradient(180deg, transparent, #2b323c 12%, #2b323c 88%, transparent); }
.tl-i { position: relative; padding-bottom: 15px; }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before { content: ""; position: absolute; left: -19px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
                background: var(--bg); border: 2px solid var(--accent); }
.tl-i .tt { font: 600 9px/1 var(--mono); color: var(--accent); letter-spacing: .06em; }
.tl-i .tn { margin: 5px 0 4px; font: 600 13px/1.35 var(--serif); color: #e9ecf1; }
.tl-i .tm { font: 500 10px/1.5 var(--sans); color: var(--ink-3); }

/* ═══════ 页面3 · 历史 ═══════ */
.hitem {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px; padding: 13px 12px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid #1e222a; border-radius: 13px;
  transition: transform .16s, border-color .16s;
}
.hitem:active { transform: scale(.985); border-color: #333b47; }
/* 卡面装饰（与相似页指纹卡同源：ui.js FP.inline）——
   背景 emotion 9 色带 + 底部 profile 22 色条；文字行窄且字多，色带压暗 + 左侧渐隐以保可读性 */
.hitem .hitem-emo {
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 42%, #000 74%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 42%, #000 74%);
}
.hitem .hitem-prof {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  pointer-events: none;
}
.hitem .no, .hitem .ht, .hitem .arrow { position: relative; z-index: 2; }
.hitem .no { flex: 0 0 20px; font: 600 11px/1 var(--mono); color: #4f5763; font-variant-numeric: tabular-nums; }
.hitem .ht { flex: 1; min-width: 0; }
.hitem .ht b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
               font: 600 15px/1.35 var(--serif); color: #e9ecf1; text-shadow: 0 1px 5px rgba(0,0,0,.72); }
.hitem .ht small { display: block; margin-top: 5px; font: 500 10px/1 var(--sans); color: var(--ink-3); letter-spacing: .02em;
                   text-shadow: 0 1px 4px rgba(0,0,0,.72); }
.hitem .arrow { flex: 0 0 auto; color: #3d444e; font: 600 14px/1 var(--sans); }
.hitem .arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hitem .dotmark { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #2c333d; }
.hitem .dotmark.hot { background: var(--accent); box-shadow: 0 0 8px rgba(245,165,36,.6); }

/* ═══════ 页面4 · 书柜 ═══════ */
.shelf-tools { display: flex; align-items: center; gap: 9px; padding: 10px 12px; margin-bottom: 18px;
               background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.shelf-tools .info { flex: 1; font: 500 11px/1.5 var(--sans); color: var(--ink-3); }
.shelf-tools .info b { color: var(--ink-2); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 2px; background: #10141a; border: 1px solid #242a33; border-radius: 9px; padding: 3px; }
.stepper button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #b6bdc8; font: 700 15px/1 var(--mono); }
.stepper button:active { background: #1c222c; }
.stepper button:disabled { color: #3d444e; }
.stepper .sv { min-width: 22px; text-align: center; font: 700 12px/1 var(--mono); color: var(--ink); }

.shelf { display: flex; flex-direction: column; gap: 26px; }
.layer-head { display: flex; align-items: baseline; gap: 8px; margin: 0 3px 10px; }
.layer-head h4 { margin: 0; font: 600 13px/1 var(--sans); color: #cfd5de; letter-spacing: .03em; }
.layer-head[contenteditable="true"], .layer-head h4[contenteditable="true"] { outline: 1px dashed rgba(245,165,36,.5); outline-offset: 3px; border-radius: 4px; }
.layer-head small { font: 500 10px/1 var(--mono); color: #5f6773; }
.layer-head .lh-edit { margin-left: auto; font: 600 9px/1 var(--sans); color: #4f5763; letter-spacing: .08em; }
.layer-head .lh-ops { margin-left: auto; display: flex; gap: 6px; }
.layer-head .lh-ops .mini { padding: 3px 9px; border-radius: 7px; border: 1px solid #2b323d; background: #161b23;
                            color: #b6bdc8; font: 600 10px/1.5 var(--sans); }
.layer-head .lh-ops .mini:active { background: #1d232d; }
.layer-head .lh-ops .mini.danger { color: #f0806f; border-color: rgba(240,128,111,.34); }
.layer-head .lh-tag { margin-left: auto; font: 600 9px/1 var(--sans); color: #4f5763; letter-spacing: .08em; }
/* 未分类（系统兜底书架）：弱化处理，突显"不是自己排的书" */
.shelf-layer.locked .layer-head h4 { color: #8d95a1; }
.shelf-layer.locked .spines { background: rgba(255,255,255,.014); border-radius: 6px; }
.shelf-layer.locked .spine { opacity: .9; }
.edit-tip { margin: 0 3px 14px; font: 500 10px/1.6 var(--sans); color: #7c8492; }

.spines { position: relative; display: flex; align-items: flex-end; gap: 5px; min-height: 88px; padding: 0 11px 9px; }
.spines::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-radius: 3px;
  background: linear-gradient(180deg, #3a424e 0%, #232932 38%, #12151b 100%);
  box-shadow: 0 10px 18px -12px #000, inset 0 1px 0 rgba(255,255,255,.09);
}
.spine {
  position: relative; flex: 0 0 auto; width: 28px; border-radius: 3px 3px 1px 1px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 8px 0 7px; z-index: 1;
  box-shadow: inset -4px 0 6px -4px rgba(0,0,0,.75), inset 4px 0 4px -4px rgba(255,255,255,.3), 2px 3px 7px -4px #000;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.1), box-shadow .18s;
  cursor: pointer;
}
.spine::before { content: ""; position: absolute; inset: 3px 3px auto 3px; height: 1px; background: rgba(255,255,255,.22); }
.spine::after { content: ""; position: absolute; inset: auto 3px 3px 3px; height: 1px; background: rgba(0,0,0,.35); }
.spine span {
  flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap;
  font: 600 11px/1 var(--serif); letter-spacing: 1.5px; color: rgba(255,255,255,.95);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
/* 书名超出书脊高度时：在书脊内来回滚动（--dy 为滚动距离，--dur 为单程时长） */
.spine span.marquee { animation: spine-scroll var(--dur, 6s) ease-in-out infinite alternate; }
@keyframes spine-scroll {
  0%, 12% { transform: translateY(0); }
  88%, 100% { transform: translateY(var(--dy, 0px)); }
}
.spine:active { transform: translateY(-6px); }
.slot { flex: 0 0 auto; width: 28px; border: 1px dashed #262d37; border-radius: 3px; }
/* 编辑态：静态虚线提示（不做常驻浮动动画，避免点不准） */
.editing .spine { outline: 1px dashed rgba(245,165,36,.55); outline-offset: 2px; cursor: pointer; }
.editing .spine.sel { outline: 1px solid var(--accent); transform: translateY(-7px);
                     box-shadow: 0 10px 18px -8px rgba(0,0,0,.9), 0 0 0 3px rgba(245,165,36,.16); }
.editing .spines { background: rgba(245,165,36,.03); border-radius: 6px; }

/* 底部弹层（书柜编辑）：绝对定位在 .app 内，桌面机型框下也不会跑出机身 */
.mask { position: absolute; inset: 0; z-index: 30; background: rgba(4,6,9,.62); backdrop-filter: blur(3px);
        opacity: 0; pointer-events: none; transition: opacity .22s; }
.mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 31;
  transform: translateY(102%);
  background: #141821; border: 1px solid #262c36; border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 16px 16px calc(22px + env(safe-area-inset-bottom));
  transition: transform .3s cubic-bezier(.22,.9,.3,1);
}
.sheet.on { transform: translateY(0); }
.sheet .grab { width: 36px; height: 4px; border-radius: 999px; background: #2b323c; margin: 0 auto 15px; }
.sheet h3 { margin: 0 0 4px; font: 600 15px/1.4 var(--serif); color: #eef1f5; }
.sheet .sub { font: 500 10px/1.6 var(--sans); color: var(--ink-3); margin-bottom: 15px; }
.sheet .lbl { font: 600 10px/1 var(--sans); color: var(--ink-3); letter-spacing: .14em; margin: 0 0 9px; }
.pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pill {
  font: 600 12px/1 var(--sans); color: #b6bdc8; background: #1a1f28;
  border: 1px solid #2a303a; padding: 9px 13px; border-radius: 10px; transition: transform .14s;
}
.pill.on { color: var(--accent); border-color: rgba(245,165,36,.45); background: rgba(245,165,36,.12); }
.pill:active { transform: scale(.95); }
.sheet .ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet .ops .btn { padding: 12px; text-align: center; }
.sheet .ops .btn.danger { color: #f87171; border-color: rgba(248,113,113,.32); background: rgba(248,113,113,.08); }

/* 轻提示（书柜：删除 / 合并后的反馈） */
.toast {
  position: absolute; left: 50%; bottom: 84px; z-index: 40; max-width: 82%;
  padding: 8px 14px; border-radius: 11px; border: 1px solid #2b323d; background: rgba(18,22,30,.96);
  color: #d7dde6; font: 500 11px/1.5 var(--sans); text-align: center;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }