/* ===== ThirdHub adapt.css — 多端屏幕自适应（v4.2） =====
   由 js/device-adapt.js 在 <html data-device="..."> 打标后生效：
   watch 手表 · narrow 折叠外屏 · phone 直板机 · fold 折叠展开 · tablet 平板 · desktop 电脑 */

/* ---------- 手表 / 超小屏（≤300px）：极简单列、大字块、少装饰 ---------- */
html[data-device="watch"] .page-title { font-size: 17px; }
html[data-device="watch"] .page-head { padding: 10px 10px 6px; gap: 8px; }
html[data-device="watch"] .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
html[data-device="watch"] #tabbar { padding: 3px 2px calc(3px + env(safe-area-inset-bottom)); }
html[data-device="watch"] .tab-ico { width: 34px; height: 22px; }
html[data-device="watch"] .tab-label { display: none; }
html[data-device="watch"] .shelf-grid,
html[data-device="watch"] .result-grid,
html[data-device="watch"] .cat-types { grid-template-columns: 1fr 1fr !important; }
html[data-device="watch"] .list-item { padding: 8px; margin-bottom: 6px !important; }
html[data-device="watch"] .btn { padding: 9px 14px; font-size: 13px; }
html[data-device="watch"] .section-head { font-size: 13px; }
html[data-device="watch"] .modal-box { width: calc(100vw - 16px) !important; }
/* v5.8：手表端 AI 顶栏胶囊——收起图标与箭头，文字可省略号收缩 */
html[data-device="watch"] .ai-topbar { gap: 6px; padding: 8px 8px 6px; }
html[data-device="watch"] .ai-topbar-center { gap: 6px; }
html[data-device="watch"] .ai-pill { padding: 7px 10px; max-width: none; flex: 1 1 0; min-width: 0; gap: 5px; }
html[data-device="watch"] .ai-pill .pill-ico { display: none; }
html[data-device="watch"] .ai-pill .pill-arrow { font-size: 9px; }

/* ---------- 折叠屏外屏 / 窄长屏（301–420px）：紧凑单列 ---------- */
html[data-device="narrow"] .page-title { font-size: 20px; }
html[data-device="narrow"] .shelf-grid,
html[data-device="narrow"] .result-grid { grid-template-columns: repeat(2, 1fr) !important; }
html[data-device="narrow"] .cat-types { grid-template-columns: repeat(3, 1fr) !important; }
html[data-device="narrow"] .tab-label { font-size: 10px; }

/* ---------- 直板手机（默认态，无需覆盖，仅留白规则） ---------- */

/* ---------- 折叠屏展开（近方形触屏）：双栏充分利用宽度 ---------- */
html[data-device="fold"] .shelf-grid { grid-template-columns: repeat(5, 1fr); }
html[data-device="fold"] .result-grid { grid-template-columns: repeat(5, 1fr); }
html[data-device="fold"] .cat-types { grid-template-columns: repeat(5, 120px); justify-content: center; }
html[data-device="fold"] .page { padding-left: max(20px, calc((100% - 720px) / 2)); padding-right: max(20px, calc((100% - 720px) / 2)); }

/* ---------- 平板 ---------- */
html[data-device="tablet"] .shelf-grid { grid-template-columns: repeat(4, 1fr); }
html[data-device="tablet"] .result-grid { grid-template-columns: repeat(4, 1fr); }

/* ---------- 电脑端（≥1024px 键鼠）：左侧垂直导航栏（64px 图标条，hover 展开 200px）+ 宽内容区 ---------- */
html[data-device="desktop"] body[data-navpos="bottom"] #app,
html[data-device="desktop"] body[data-navpos="fold"] #app { flex-direction: row; }
html[data-device="desktop"] body[data-navpos="bottom"] .safe-top,
html[data-device="desktop"] body[data-navpos="fold"] .safe-top { display: none; }
/* v4.8：左侧导航栏默认 64px 只显示图标；hover 展开 200px 显示文字；点击左下角折叠钮可永久折叠 */
html[data-device="desktop"] body[data-navpos="bottom"] #tabbar,
html[data-device="desktop"] body[data-navpos="fold"] #tabbar {
  flex-direction: column; justify-content: flex-start; gap: 2px;
  width: 64px; padding: 14px 6px 8px;
  border-top: 0; border-right: 1px solid var(--border);
  overflow: visible;
  transition: width .25s ease;
}
html[data-device="desktop"] body[data-navpos="bottom"] #tabbar .tab-scroll,
html[data-device="desktop"] body[data-navpos="fold"] #tabbar .tab-scroll {
  flex: 1; min-height: 0; width: 100%;
  flex-direction: column; justify-content: flex-start;
  overflow-y: auto; overflow-x: visible;
  scroll-snap-type: none;
}
html[data-device="desktop"] body[data-navpos="bottom"] #tabbar:not(.collapsed):hover,
html[data-device="desktop"] body[data-navpos="fold"] #tabbar:not(.collapsed):hover,
html[data-device="desktop"] body[data-navpos="bottom"] #tabbar.expanded,
html[data-device="desktop"] body[data-navpos="fold"] #tabbar.expanded { width: 200px; }
html[data-device="desktop"] body[data-navpos="bottom"] .tab,
html[data-device="desktop"] body[data-navpos="fold"] .tab {
  flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
  width: 100%; min-width: 0; padding: 10px 16px; border-radius: 10px;
  border-left: 4px solid transparent;
  white-space: nowrap;
}
html[data-device="desktop"] body[data-navpos="bottom"] .tab .tab-label,
html[data-device="desktop"] body[data-navpos="fold"] .tab .tab-label { display: none; font-size: 13px; }
html[data-device="desktop"] body[data-navpos="bottom"] #tabbar:not(.collapsed):hover .tab .tab-label,
html[data-device="desktop"] body[data-navpos="fold"] #tabbar:not(.collapsed):hover .tab .tab-label,
html[data-device="desktop"] body[data-navpos="bottom"] #tabbar.expanded .tab .tab-label,
html[data-device="desktop"] body[data-navpos="fold"] #tabbar.expanded .tab .tab-label { display: inline; }
html[data-device="desktop"] body[data-navpos="bottom"] .tab:hover,
html[data-device="desktop"] body[data-navpos="fold"] .tab:hover { color: var(--primary); background: rgba(128,128,128,.06); }
/* 当前激活板块：左侧 4px 彩色竖线 + 底色 */
html[data-device="desktop"] body[data-navpos="bottom"] .tab.on,
html[data-device="desktop"] body[data-navpos="fold"] .tab.on {
  color: var(--primary);
  border-left-color: var(--accent, #e8452c);
  background: rgba(59,91,253,.08);
}
html[data-device="desktop"] body[data-navpos="bottom"] .tab.on .tab-ico,
html[data-device="desktop"] body[data-navpos="fold"] .tab.on .tab-ico { background: transparent; }
/* 桌面端指示器隐藏（左侧栏用竖线），「我的」固定底部不参与滚动 */
html[data-device="desktop"] body[data-navpos="bottom"] #tab-indicator,
html[data-device="desktop"] body[data-navpos="fold"] #tab-indicator { display: none; }
html[data-device="desktop"] body[data-navpos="bottom"] .tab-pin,
html[data-device="desktop"] body[data-navpos="fold"] .tab-pin { position: sticky; bottom: 0; background: var(--tabbar-bg); }
html[data-device="desktop"] body[data-navpos="bottom"] #tab-collapse,
html[data-device="desktop"] body[data-navpos="fold"] #tab-collapse { display: flex; }
html[data-device="desktop"] body[data-navpos="bottom"] #pages,
html[data-device="desktop"] body[data-navpos="fold"] #pages { flex: 1; height: 100vh; /* 兜底：旧 WebView(Chrome74) 不支持 dvh */ height: 100dvh; }
html[data-device="desktop"] body[data-navpos="bottom"] .page ,
html[data-device="desktop"] body[data-navpos="fold"] .page { padding: 0 max(40px, calc((100% - 1080px) / 2)) 48px; }
html[data-device="desktop"] body[data-navpos="bottom"] .page-head,
html[data-device="desktop"] body[data-navpos="fold"] .page-head { padding-top: 22px; }
html[data-device="desktop"] body[data-navpos="bottom"] .shelf-grid,
html[data-device="desktop"] body[data-navpos="fold"] .shelf-grid { grid-template-columns: repeat(6, 1fr); }
html[data-device="desktop"] body[data-navpos="bottom"] .result-grid,
html[data-device="desktop"] body[data-navpos="fold"] .result-grid { grid-template-columns: repeat(6, 1fr); }
html[data-device="desktop"] body[data-navpos="bottom"] .icon-btn:hover,
html[data-device="desktop"] body[data-navpos="fold"] .icon-btn:hover { background: var(--border); color: var(--text-primary); }
html[data-device="desktop"] body[data-navpos="bottom"] .list-item:hover,
html[data-device="desktop"] body[data-navpos="fold"] .list-item:hover { background: var(--bg-card-hover, rgba(128,128,128,.06)); }
html[data-device="desktop"] body[data-navpos="bottom"] .btn:hover,
html[data-device="desktop"] body[data-navpos="fold"] .btn:hover { filter: brightness(1.06); }
/* 桌面端顶栏导航偏好失效时兜底：强制左侧竖排 */
html[data-device="desktop"] body[data-navpos="top"] #app { flex-direction: column; }
html[data-device="desktop"] body[data-navpos="top"] #tabbar {
  flex-direction: row; width: auto; justify-content: center; gap: 8px;
  border-right: 0; border-bottom: 1px solid var(--border);
  padding: 6px 4px;
}
html[data-device="desktop"] body[data-navpos="top"] .tab { flex: 0 1 110px; }
html[data-device="desktop"] body[data-navpos="top"] #tab-collapse { display: none; }

/* ---------- 阅读器 / 播放器在大屏的宽度收敛 ---------- */
@media (min-width: 1024px) {
  .nr-body { max-width: 860px; margin: 0 auto; width: 100%; }
  .nr-catalog { max-width: 420px; }
}

/* ---------- v4.7 阅读器多屏智能适配（与 device-adapt 标记联动） ---------- */
/* 平板 / 折叠展开：正文与上下栏收窄居中，避免整屏拉伸 */
html[data-device="tablet"] .nr-body,
html[data-device="fold"] .nr-body { max-width: 760px; }
html[data-device="tablet"] .nr-top,
html[data-device="tablet"] .nr-bottom,
html[data-device="fold"] .nr-top,
html[data-device="fold"] .nr-bottom { max-width: 860px; margin: 0 auto; width: 100%; }
/* 手表/超小屏：更紧凑的正文与字号 */
html[data-device="watch"] .nr-body { font-size: 15px; line-height: 1.6; padding-left: 14px; padding-right: 14px; }
html[data-device="watch"] .nr-chapter-title { font-size: 1.1em; }
/* 折叠外屏/窄长屏：收紧正文边距 */
html[data-device="narrow"] .nr-body { padding-left: 16px; padding-right: 16px; }

/* ---------- 折叠屏铰链避让（支持 horizontal-viewport-segments 的设备） ---------- */
@media (horizontal-viewport-segments: 2) {
  html[data-device="fold"] .modal-box { max-width: calc(50vw - 48px); }
}
/* v10.8 手表/小屏导航横向滑动 */
html[data-device="watch"] #tabbar, html[data-device="narrow"] #tabbar { overflow: hidden; }
html[data-device="watch"] .tab-scroll, html[data-device="narrow"] .tab-scroll, .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tab-scroll::-webkit-scrollbar { display: none; }

/* v28.8:手表端启动页适配 */
html[data-device="watch"] #boot-splash{gap:8px}
html[data-device="watch"] #boot-splash .bs-logo{width:54px;height:54px;border-radius:12px}
html[data-device="watch"] #boot-splash .bs-name{font-size:11.5px}
html[data-device="watch"] #boot-splash .bs-sub{font-size:9.5px}