/* 🍅 番茄书源 - 界面样式（移动端优先 + 四主题系统：纸白/羊皮/护眼/夜间） */

/* ===== 主题变量 =====
   所有颜色一律取自变量，切主题只需换 data-theme */
:root,
[data-theme="paper"] {
  --primary: #e74c3c;
  --primary-dark: #c0392b;
  --bg: #f7f2e9;
  --card: #fffdf7;
  --text: #3a332a;
  --text-soft: #6b6255;
  --text-light: #8f8677;
  --border: #eadfcc;
  --hover: #f3ead9;
  --tag-bg: #fbe9e2;
  --tag-text: #c0392b;
  --glass: rgba(247, 242, 233, .92);
  --glass-card: rgba(255, 253, 247, .94);
  --shadow: 0 2px 8px rgba(80, 60, 30, .07);
  --paper-vignette: rgba(120, 90, 40, .05);
  --meta-theme: #f7f2e9;
}

[data-theme="sepia"] {
  --primary: #c05a33;
  --primary-dark: #9c4526;
  --bg: #ecdfc3;
  --card: #f6ecd4;
  --text: #4d3d26;
  --text-soft: #6e5c41;
  --text-light: #96856a;
  --border: #ddcba4;
  --hover: #e7d9b9;
  --tag-bg: #e9d9b6;
  --tag-text: #8a5a2b;
  --glass: rgba(236, 223, 195, .92);
  --glass-card: rgba(246, 236, 212, .94);
  --shadow: 0 2px 8px rgba(90, 65, 25, .1);
  --paper-vignette: rgba(110, 80, 30, .08);
  --meta-theme: #ecdfc3;
}

[data-theme="green"] {
  --primary: #2f7d4f;
  --primary-dark: #256540;
  --bg: #d7e8d4;
  --card: #e9f4e5;
  --text: #29372b;
  --text-soft: #4c5f4e;
  --text-light: #6f8471;
  --border: #c2d8bd;
  --hover: #dcecd6;
  --tag-bg: #cfe5c9;
  --tag-text: #3d6b43;
  --glass: rgba(215, 232, 212, .92);
  --glass-card: rgba(233, 244, 229, .94);
  --shadow: 0 2px 8px rgba(40, 70, 45, .08);
  --paper-vignette: rgba(40, 80, 50, .05);
  --meta-theme: #d7e8d4;
}

[data-theme="dark"] {
  --primary: #c25e4a;
  --primary-dark: #a94a38;
  --bg: #16130f;
  --card: #201c16;
  --text: #b5ab99;
  --text-soft: #948a78;
  --text-light: #6f6759;
  --border: #302a21;
  --hover: #2a251d;
  --tag-bg: #3a2b1f;
  --tag-text: #c98a5a;
  --glass: rgba(22, 19, 15, .92);
  --glass-card: rgba(32, 28, 22, .94);
  --shadow: 0 2px 10px rgba(0, 0, 0, .45);
  --paper-vignette: rgba(0, 0, 0, .3);
  --meta-theme: #16130f;
}

:root {
  --radius: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 纸张纤维噪点纹理（SVG 分形噪声，随主题底色透出不同质感） */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  /* 阅读正文衬线字体：还原实体书排版 */
  --reader-font: Georgia, "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  background-image: var(--grain);
  color: var(--text);
  line-height: 1.6;
  transition: background-color .25s ease, color .25s ease;
}

button {
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* ===== 顶栏 ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: background-color .25s ease;
}

.logo { font-size: 19px; cursor: pointer; user-select: none; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.online-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3cb371;
  box-shadow: 0 0 0 0 rgba(60, 179, 113, .45);
  animation: onlinePulse 2s infinite;
}

@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(60, 179, 113, .45); }
  70% { box-shadow: 0 0 0 6px rgba(60, 179, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 179, 113, 0); }
}

.tabs { display: flex; gap: 8px; }

.tab {
  min-height: 44px;
  padding: 8px 18px;
  border: none;
  border-radius: 22px;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  color: var(--text-light);
  transition: all .15s;
}

.tab.active { background: var(--primary); color: #fff; }

main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }

/* ===== 搜索栏 ===== */
.search-bar {
  position: sticky;
  top: 65px;
  z-index: 9;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 10px 18px;
  font-size: 16px;                  /* ≥16px 防止 iOS 聚焦自动放大 */
  border: 2px solid var(--border);
  border-radius: 23px;
  outline: none;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color .15s;
}

.search-bar input::placeholder { color: var(--text-light); }
.search-bar input:focus { border-color: var(--primary); }

.search-bar button {
  min-height: 46px;
  padding: 10px 26px;
  font-size: 16px;
  border: none;
  border-radius: 23px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

.search-bar button:active { background: var(--primary-dark); }

/* ===== 书籍卡片 ===== */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.book-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .25s ease;
}

.book-cover {
  flex-shrink: 0;
  width: 84px;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--tag-bg), var(--hover));
}

.cover-fallback {
  flex-shrink: 0;
  width: 84px;
  height: 112px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--primary);
  background: linear-gradient(135deg, var(--tag-bg), var(--hover));
}

.book-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.book-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.book-meta { font-size: 13px; color: var(--text-light); margin: 2px 0 6px; }

.book-intro {
  font-size: 13px;
  color: var(--text-soft);
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.book-actions { display: flex; gap: 10px; margin-top: 8px; }

.btn-sm {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 14px;
  border: 1px solid var(--primary);
  border-radius: 18px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: all .15s;
}

.btn-sm:active { background: var(--primary); color: #fff; }
.btn-sm.danger { border-color: var(--text-light); color: var(--text-light); }
.btn-sm.danger:active { background: var(--text-light); color: var(--card); }
.btn-sm:disabled { opacity: .5; cursor: default; }

/* ===== 空状态 / 提示 ===== */
.empty { text-align: center; padding: 60px 0; color: var(--text-light); font-size: 15px; }
.empty a { color: var(--primary); }

/* ===== 分页 ===== */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.pager button {
  min-height: 44px;
  padding: 8px 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}
.pager button:disabled { opacity: .4; cursor: default; }
#page-info { font-size: 14px; color: var(--text-light); }

/* ===== 详情页 ===== */
.back-btn {
  min-height: 44px;
  margin-bottom: 14px;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}

.detail-card {
  display: flex;
  gap: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  transition: background-color .25s ease;
}

.detail-card .book-cover, .detail-card .cover-fallback { width: 108px; height: 144px; font-size: 40px; }

.detail-info { min-width: 0; }
.detail-info h2 { font-size: 21px; margin-bottom: 4px; }
.detail-info .book-meta { font-size: 14px; }
.detail-intro { font-size: 14px; color: var(--text-soft); margin: 10px 0; white-space: pre-wrap; }

.tag { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: 12px; border-radius: 10px; background: var(--tag-bg); color: var(--tag-text); }

.chapter-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 12px; }
.chapter-toolbar h3 { font-size: 17px; }
.chapter-toolbar span { font-size: 13px; color: var(--text-light); font-weight: normal; }
.chapter-toolbar button {
  min-height: 40px;
  padding: 6px 18px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.chapter-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .1s;
}
.chapter-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-item.last-read { border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ===== 阅读页（沉浸式：隐藏全站导航，工具栏悬浮可收起） ===== */
body.reading .topbar { display: none; }

.reader-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reader-nav button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.reader-nav button:disabled { opacity: .4; cursor: default; }

#reader-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#reader-settings-btn { min-width: 52px; font-family: Georgia, serif; }

/* 顶部工具栏：吸顶毛玻璃，收起时上滑隐藏 */
.reader-nav.top {
  position: sticky;
  top: 0;
  z-index: 9;
  margin: -20px -16px 16px;
  padding: 10px 16px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s ease, opacity .25s ease;
}

/* 底部翻页栏：固定在拇指热区，收起时下滑隐藏 */
.reader-nav.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  justify-content: center;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  background: var(--glass-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  transition: transform .25s ease;
}
.reader-nav.bottom button { flex: 1; max-width: 220px; min-height: 48px; }

#view-reader { padding-bottom: calc(72px + var(--safe-bottom)); }
#view-reader.bars-hidden .reader-nav.top { transform: translateY(-110%); opacity: 0; pointer-events: none; }
#view-reader.bars-hidden .reader-nav.bottom { transform: translateY(110%); }

/* 正文：纸张质感 —— 噪点纤维纹理 + 四周晕染 + 衬线书法字体 */
.reader-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 32px;
  background-color: var(--card);
  background-image: var(--grain);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 0 90px var(--paper-vignette);
  font-family: var(--reader-font);
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: .02em;
  cursor: pointer;              /* 点击正文切换工具栏 */
  transition: background-color .25s ease;
}
.reader-content h2 {
  font-size: 1.25em;
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: .08em;
}
/* 章节标题下的一笔装饰墨线 */
.reader-content h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 1px;
  background: var(--primary);
  opacity: .55;
}
.reader-content p { margin-bottom: 1em; text-indent: 2em; }

/* ===== 底部弹层（阅读设置 / 在线设备 共用样式） ===== */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .3);
}

.sheet-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(76px + var(--safe-bottom));
  z-index: 31;
  width: min(440px, calc(100vw - 24px));
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  animation: sheetUp .22s ease;
}

@keyframes sheetUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

.sheet-row { display: flex; align-items: center; gap: 14px; }
.sheet-row + .sheet-row { margin-top: 16px; }
.sheet-label { flex-shrink: 0; font-size: 14px; color: var(--text-light); }

.font-ctrl { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; }
.font-ctrl button {
  min-width: 64px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
#font-size-now { min-width: 48px; text-align: center; font-size: 14px; color: var(--text-soft); }

.theme-swatches { display: flex; gap: 8px; flex: 1; }

/* 色票所见即所得：颜色写死为各主题的实际底色，不随当前主题变化 */
.swatch {
  flex: 1;
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 21px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.swatch[data-theme="paper"] { background: #fffdf7; color: #3a332a; box-shadow: inset 0 0 0 1px #eadfcc; }
.swatch[data-theme="sepia"] { background: #f6ecd4; color: #4d3d26; box-shadow: inset 0 0 0 1px #ddcba4; }
.swatch[data-theme="green"] { background: #e9f4e5; color: #29372b; box-shadow: inset 0 0 0 1px #c2d8bd; }
.swatch[data-theme="dark"]  { background: #201c16; color: #b5ab99; box-shadow: inset 0 0 0 1px #302a21; }
.swatch.active { border-color: var(--primary); transform: scale(1.04); }

/* ===== 在线设备面板 ===== */
.online-header { justify-content: space-between; }
.online-count-label { font-size: 13px; color: var(--text-soft); }

.online-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-height: 50vh;
  overflow-y: auto;
}

.online-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.online-item.is-self { border-color: var(--primary); }
.online-item .device-icon { font-size: 20px; flex-shrink: 0; }
.online-item .item-info { flex: 1; min-width: 0; }
.online-item .item-activity { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-item.is-self .item-activity::after { content: '（本机）'; color: var(--primary); font-weight: 600; margin-left: 4px; }
.online-item .item-time { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(90px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: 86vw;
  padding: 10px 24px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 14px;
  z-index: 100;
  animation: fadeIn .2s;
}

@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===== 悬停效果（仅鼠标设备，避免移动端粘滞高亮） ===== */
@media (hover: hover) {
  .tab:hover { background: var(--hover); }
  .tab.active:hover { background: var(--primary); }
  .search-bar button:hover { background: var(--primary-dark); }
  .book-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
  .btn-sm:hover:not(:disabled) { background: var(--primary); color: #fff; }
  .btn-sm.danger:hover { background: var(--text-light); color: var(--card); }
  .pager button:not(:disabled):hover,
  .back-btn:hover,
  .chapter-toolbar button:hover,
  .font-ctrl button:hover,
  .reader-nav button:not(:disabled):hover,
  .online-badge:hover { border-color: var(--primary); color: var(--primary); }
  .chapter-item:hover { border-color: var(--primary); color: var(--primary); }
}

/* ===== 移动端布局（拇指热区导航 + 通栏阅读） ===== */
@media (max-width: 600px) {
  .topbar { padding: 8px 14px; }
  .logo { font-size: 17px; }

  /* 导航移到底部拇指热区，适配全面屏安全区 */
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    justify-content: space-around;
    gap: 0;
    padding: 6px 12px calc(6px + var(--safe-bottom));
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
  }
  .tab { flex: 1; min-height: 48px; font-size: 16px; border-radius: 24px; }

  main { padding: 14px 12px calc(84px + var(--safe-bottom)); }

  .search-bar { top: 50px; }
  .book-grid { grid-template-columns: 1fr; }
  .chapter-grid { grid-template-columns: 1fr; }

  .detail-card { padding: 14px; gap: 14px; }
  .detail-card .book-cover, .detail-card .cover-fallback { width: 92px; height: 124px; font-size: 34px; }
  .detail-info h2 { font-size: 18px; }

  /* 阅读页：正文全宽通栏 */
  .reader-nav.top { margin: -14px -12px 16px; padding: 8px 12px; }

  /* 阅读时连底部 Tab 栏也隐藏，只留翻页栏 */
  body.reading .tabs { display: none; }

  .reader-content {
    margin: 0 -12px;
    padding: 26px 20px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 17px;
  }
  .reader-nav.bottom button { max-width: none; }

  .sheet-panel { bottom: calc(72px + var(--safe-bottom)); }

  .toast { bottom: calc(100px + var(--safe-bottom)); }
}