/* =====================================================================
 * Carnet · 主页   （样式 3 / 16）
 * ---------------------------------------------------------------------
 * ① 主页容器与顶栏（模式切换、搜索、菜单）
 * ② 封面：书脊、图案层、高光、页数徽章
 * ③ 底栏毛玻璃圆钮与顶部渐变过渡
 *
 * 说明：样式拆分成多个文件后靠 <link> 顺序层叠，脱离这块上下文单独看时请留意。
 * ===================================================================== */
/* ============ 主页 ============ */
#home{position:absolute;inset:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;padding-top:calc(16px + env(safe-area-inset-top))}
.topright{display:flex;align-items:center;gap:10px;position:relative}
.home-head{text-align:center;margin-top:1.5vh;pointer-events:none}
.home-head h1{
  margin:0;font-size:clamp(21px,3.1vw,33px);font-weight:700;letter-spacing:.06em;
  text-shadow:0 2px 14px rgba(0,0,0,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px
}
.home-head .pages{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font-size:13.5px;opacity:.82;letter-spacing:.05em
}
.carousel-wrap{flex:1;display:flex;align-items:center;overflow:hidden;cursor:grab;touch-action:pan-y}
.carousel-wrap:active{cursor:grabbing}
.carousel{display:flex;align-items:center;gap:clamp(18px,3vw,46px);padding:0 42vw;will-change:transform}
.book-item{flex:0 0 auto;transition:transform .5s cubic-bezier(.25,.8,.3,1),filter .5s;filter:saturate(.86) brightness(.94);position:relative}
.book-item.active{transform:scale(1.05);filter:none}
.book-item.active .gear{opacity:1;pointer-events:auto}
/* 长按拖动排序：选中的那本被"拎"起来，其余平滑让位 */
.carousel-wrap.sortmode{cursor:grabbing;touch-action:none;user-select:none;-webkit-user-select:none}
.carousel-wrap.sortmode .book-item{transition:transform .2s cubic-bezier(.25,.8,.3,1),filter .2s ease}
.carousel-wrap.sortmode .book-item.picked{transition:none;z-index:30;filter:drop-shadow(0 24px 30px rgba(6,8,20,.55))!important}

/* 封面 */
.cover{
  position:relative;width:clamp(148px,19vw,238px);aspect-ratio:3/4.05;
  border-radius:5px 13px 13px 5px;overflow:hidden;
  box-shadow:0 26px 46px -18px rgba(20,22,40,.62),0 6px 14px rgba(20,22,40,.28),
             inset 0 0 0 1px rgba(255,255,255,.14);
  background:#ddd;
}
.cover .pattern{position:absolute;inset:0;opacity:.95;pointer-events:none}
.cover .spine{
  position:absolute;left:0;top:0;bottom:0;width:8.5%;
  box-shadow:2px 0 8px rgba(0,0,0,.35),inset -1px 0 0 rgba(255,255,255,.18);
}
.cover .spine::after{content:"";position:absolute;left:34%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.16)}
.cover .gloss{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 68%,rgba(255,255,255,.12) 100%);
  mix-blend-mode:soft-light;
}
.cover .edge{position:absolute;right:0;top:2%;bottom:2%;width:2.5%;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(255,255,255,.5));border-radius:0 12px 12px 0}
.gear{
  position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:50%;
  background:rgba(52,46,44,.72);display:grid;place-items:center;font-size:14px;
  opacity:0;transition:opacity .25s,transform .25s;backdrop-filter:blur(4px);z-index:3
}
.gear:hover{transform:rotate(35deg)}
.cover-badge{
  position:absolute;left:calc(8.5% + 9px);bottom:9px;font-size:11px;padding:3px 8px;
  border-radius:999px;background:rgba(0,0,0,.34);color:#fff;letter-spacing:.05em;backdrop-filter:blur(4px)
}
.actionbar{
  position:relative;
  display:flex;justify-content:center;gap:clamp(12px,2.4vw,22px);
  padding:14px 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))
}
/* 底栏顶部的透明渐变过渡：滚到底的书和按钮都不会显得硬切 */
.actionbar::before{
  content:'';position:absolute;left:0;right:0;bottom:0;top:-80px;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,var(--ab-fade,rgba(12,14,28,.02)) 34%,var(--ab-fade-2,rgba(12,14,28,.38)) 100%)
}
/* 浅色背景时反过来向白色过渡，强度收一点免得底部发白过头 */
#home.bg-light .actionbar{--ab-fade:rgba(255,255,255,.03);--ab-fade-2:rgba(255,255,255,.48)}
/* 底栏按键：毛玻璃圆钮（原来是近乎不透明的白色 rgba(255,255,255,.9)，压不住背景） */
.actionbar .icon-btn{
  width:52px;height:52px;font-size:19px;
  background:var(--glass);color:#fff;border-color:var(--glass-bd);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 22px -10px rgba(20,22,40,.55)
}
.actionbar .icon-btn:hover{background:rgba(255,255,255,.26)}
.actionbar .icon-btn.danger{color:#ff92ab}
/* 浅色背景：玻璃 tint 换深一点、图标换深色，不然白图标贴在浅玻璃上看不清
   （以前按键是近乎不透明的白色圆钮，什么背景都不用管；改毛玻璃后必须补这套） */
#home.bg-light .actionbar .icon-btn{
  color:#2b2f3d;background:rgba(40,44,66,.12);border-color:rgba(40,44,66,.16)
}
#home.bg-light .actionbar .icon-btn:hover{background:rgba(40,44,66,.2)}
#home.bg-light .actionbar .icon-btn.danger{color:#c33b5c}