:root {
  color-scheme: light;
  --bg: #f7f4ef;
  --panel: #fffdf9;
  --ink: #24211d;
  --muted: #6c6258;
  --line: #ded6cb;
  --accent: #1f6f78;
  --accent-dark: #144c53;
  --mark: #fff2b8;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  color: var(--ink);
  background: var(--bg);
  font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: 0 0 auto;
  min-height: 76px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
}

.topbar > div:first-child {
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0;
}

.titleRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.titleActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.contributorsBadge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.collationLevels {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.collationLevelChip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.collationLevelChip.is-cuxiao {
  background: #eef2f7;
  color: #4b6584;
  border-color: #cfd9e3;
}

.collationLevelChip.is-jingxiao {
  background: #fff4cf;
  color: #7a5500;
  border-color: #e0bb4d;
}

.forceNotice {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fff4cf;
  color: #7a5500;
  border: 1px solid #e0bb4d;
  border-radius: 6px;
  font-size: 13px;
}

.nicknameRow {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nicknameRow input {
  flex: 1;
}

.nicknameRow input[readonly] {
  background: #f4f0e3;
  color: #5a5240;
  cursor: default;
}

.rankRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rankLevel {
  font-size: 12px;
  color: #6e6451;
  background: #efe9d5;
  border: 1px solid #d8cfb5;
  border-radius: 4px;
  padding: 1px 6px;
}

.rewardProgressBar {
  margin-top: 8px;
  background: #ece5d0;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.rewardProgressFill {
  background: linear-gradient(90deg, #b89030, #e0bb4d);
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.diffPre {
  background: #f7f4ec;
  border: 1px solid #ece5d0;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  margin: 4px 0 0;
  max-height: 50vh;
}

.diffPre span { display: block; }
.diffPre .diffAdd { background: #e6f4e6; color: #245524; }
.diffPre .diffDel { background: #fde8e8; color: #842; }
.diffPre .diffHunk { color: #5a6ca0; }
.diffPre .diffHead { color: #8a7e64; }

.diffSummary {
  margin: 6px 0 0;
}

.diffSummaryItem {
  background: #f7f4ec;
  border: 1px solid #ece5d0;
  border-radius: 6px;
  margin: 8px 0;
  padding: 8px 10px;
}

.diffSummaryItem > strong {
  color: var(--ink);
  font-size: 14px;
}

.simpleDiffBlock { margin-bottom: 8px; }
.simpleDiffLabel { font-size: 12px; color: #6e6451; margin-bottom: 2px; }
.simpleDiffDel,
.simpleDiffAdd {
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.simpleDiffDel { background: #fde8e8; color: #842; }
.simpleDiffAdd { background: #e6f4e6; color: #245524; }

.diffNotice {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fff4cf;
  color: #7a5500;
  border: 1px solid #e0bb4d;
  border-radius: 6px;
  font-size: 13px;
}

.tutorialDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  max-height: 86vh;
  background: #fff;
  border: 1px solid #d8cfb5;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tutorialDialog.isHidden { display: none; }

.tutorialHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #ece5d0;
  background: #f7f4ec;
}

.tutorialHeader strong { flex: 1; font-size: 1.05rem; }

.tutorialStepCount {
  font-size: 12px;
  color: #6e6451;
  background: #efe9d5;
  border-radius: 999px;
  padding: 2px 10px;
}

.tutorialBody {
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.75;
  color: #3a3527;
  overflow-y: auto;
  flex: 1;
}

.tutorialBody strong { color: #7a5500; }
.tutorialBody ol, .tutorialBody ul { padding-left: 1.4em; margin: 6px 0; }
.tutorialBody li { margin: 4px 0; }

.tutorialFigure { margin: 12px 0; }
.tutorialFigure img {
  width: 100%;
  border: 1px solid #d8cfb5;
  border-radius: 6px;
  display: block;
}
.tutorialFigure figcaption {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.tutorialFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #ece5d0;
  background: #fbf8ee;
}

.tutorialDots { display: flex; gap: 6px; }

.tutorialDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8cfb5;
}

.tutorialDot.active { background: #b89030; }

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

.cmetaFullName {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85em;
  letter-spacing: 0.5px;
  color: #6e6451;
  font-variant: small-caps;
}

.cmetaIntro {
  text-align: center;
  padding: 10px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #ece5d0;
  color: #5a5240;
  line-height: 1.7;
}

/* 使用者下拉選單 */
.userMenuWrapper {
  position: relative;
  display: inline-block;
}
.userMenuWrapper.isHidden { display: none; }

.userMenuButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line, #d8cfb5);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.userMenuButton:hover { background: #fbf8ee; }

.userMenuArrow { font-size: 10px; color: #8a7e64; }

.userMenuPopup {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #d8cfb5;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  z-index: 100;
}
.userMenuPopup.isHidden { display: none; }

.userMenuItem {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.userMenuItem:hover { background: #fbf8ee; }
.userMenuItem.isHidden { display: none; }

.userMenuDivider {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid #ece5d0;
}

/* 個人頁面下方的次要操作（如重看教學） */
.profileFooterLink {
  margin-top: 16px;
  text-align: center;
}

.contributorsBadge::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 280px;
  transform: translateX(-50%);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf9;
  box-shadow: 0 10px 24px rgba(36, 33, 29, 0.16);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
}

.contributorsBadge:hover::after,
.contributorsBadge:focus::after {
  opacity: 1;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  min-height: calc(2em * 1.5);
  max-height: calc(2em * 1.5);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.topbar .sourceBadge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  padding: 2px 10px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  cursor: help;
  overflow: visible;
}

.sourceBadge::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 24;
  width: min(560px, calc(100vw - 40px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf9;
  box-shadow: 0 10px 24px rgba(36, 33, 29, 0.16);
  font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
}

.sourceBadge:hover::after,
.sourceBadge:focus::after {
  opacity: 1;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bookPicker {
  position: relative;
  width: min(480px, 46vw);
  min-width: 280px;
}

.bookPickerButton {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: 50px;
  padding: 7px 12px;
  text-align: left;
}

.bookPickerButton::after {
  content: "⌄";
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.bookPickerButton span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bookPickerTitle {
  color: var(--ink);
  font-size: 18px;
}

#bookPickerMeta {
  color: var(--muted);
  font-size: 12px;
}

.bookPickerPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(560px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: 0 16px 34px rgba(36, 33, 29, 0.18);
}

.bookPickerPanel input[type="search"] {
  width: 100%;
  margin-bottom: 8px;
}

.bookPickerList {
  display: grid;
  gap: 6px;
  max-height: min(460px, calc(100vh - 170px));
  overflow: auto;
}

.bookPickerItem {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.bookPickerItem:hover,
.bookPickerItem.isSelected {
  border-color: var(--accent);
  background: #eef7f8;
}

.bookPickerItem strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.bookPickerItem > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.bookPickerChips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bookRecommendation,
.bookImageAccess,
.bookContributors {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
}

.bookRecommendation.isRecommended {
  border-color: #e0bb4d;
  color: #7a5500;
  background: #fff4cf;
}

.bookImageAccess {
  border-color: #79a9a9;
  color: #2f6f72;
  background: #eef7f8;
}

.bookContributors {
  border-color: #8db98d;
  color: #3f6b3f;
  background: #eef6ee;
}

/* 通知與公告 */
.userMenuDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0392b;
  margin-left: 4px;
}
.userMenuDot.isHidden { display: none; }

.notifyBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
}
.notifyBadge.isHidden { display: none; }

.notifyDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  max-height: 80vh;
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d8cfb5;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  z-index: 60;
  overflow: hidden;
}
.notifyDialog.isOpen { display: flex; }

.notifyBody {
  padding: 14px 18px;
  overflow-y: auto;
}
.notifyEmpty {
  color: var(--muted);
  text-align: center;
  padding: 20px 0;
}
.notifyItem {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
}
.notifyItem.isUnread {
  border-color: #c9a84c;
  background: #fdf8e8;
}
.notifyItemHead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.notifyKind {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ece5d0;
  color: #6b5a2a;
}
.notifyTime {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.notifyItemBody {
  margin: 6px 0 0;
  font-size: 14px;
  color: #3a3527;
}
.notifySection { margin-bottom: 16px; }
.notifySection:last-child { margin-bottom: 0; }
.notifySectionHead {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.notifyItem ul {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 14px;
  color: #3a3527;
}
.notifyItem ul li { margin: 2px 0; }
.notifyItem p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #3a3527;
}
.notifyItem a {
  color: #8c5b1e;
  text-decoration: underline;
  cursor: pointer;
}

.bookPickerEmpty {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}

button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}

button:hover {
  background: var(--accent-dark);
}

.secondaryButton {
  color: var(--accent);
  background: #fff;
}

.secondaryButton:hover {
  color: #fff;
}

.secondaryButton.isActive {
  color: #fff;
  background: var(--accent);
}

.secondaryButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.iconButton {
  width: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.isHidden {
  display: none;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(170px, 14vw) 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.workspace.hasImage {
  grid-template-columns: minmax(170px, 14vw) minmax(280px, 36vw) 1fr;
}

.imagePane {
  display: none;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.workspace.hasImage .imagePane {
  display: flex;
  flex-direction: column;
}

.rightPane {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.textPane {
  height: 100%;
  min-width: 0;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.paneHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.paneHeader strong {
  white-space: nowrap;
}

.textPane > .paneHeader > div:first-child {
  flex: 0 0 auto;
  min-width: max-content;
}

.headerControls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.paneHeader span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

select,
input[type="search"],
input[type="text"],
.pageJumpInput,
.metaRow input {
  min-height: 34px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.searchControls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: min(420px, 44vw);
}

.paneHeader .textPaneNav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.workspace.hasImage .paneHeader .textPaneNav {
  display: none;
}

.searchControls input[type="search"] {
  flex: 1;
}

.searchCount {
  min-width: 54px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.searchControls #toggleEditButton {
  white-space: nowrap;
}

.searchHit {
  padding: 0 2px;
  border-radius: 3px;
  background: #ffe27a;
}

.searchHit.active {
  color: #fff;
  background: var(--accent);
}

.pageJump {
  color: var(--muted);
  font-size: 14px;
}

.pageJumpInput {
  width: 72px;
  text-align: center;
}

.pageJumpSuffix {
  color: var(--muted);
  font-size: 14px;
}

.imageStage {
  position: relative;
  height: calc(100% - 52px);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 10px 14px 76px;
  background: #ebe5da;
  touch-action: none;
}

#pageImage {
  display: none;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  box-shadow: 0 8px 28px rgba(36, 33, 29, 0.22);
  background: #fff;
  cursor: zoom-in;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

#pageImage.isZoomed {
  cursor: grab;
}

#pageImage.isDragging {
  cursor: grabbing;
}

.placeholder {
  width: min(360px, 92%);
  padding: 22px;
  border: 1px dashed #b6aa9b;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  background: rgba(255, 253, 249, 0.72);
}

.placeholder span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}

.readerGrid {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.segmentList {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #faf7f1;
}

.segmentButton {
  width: 100%;
  min-height: 60px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.segmentButton:hover,
.segmentButton.active {
  color: var(--ink);
  background: var(--mark);
}

.segmentButton small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-family: "Segoe UI", sans-serif;
}

.segmentButton span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.55;
}

/* === 卷→篇樹狀目錄（chapterTreeMode） === */
.segmentList.chapterTreeMode {
  padding: 4px 0;
}

.chapterVolume {
  border-bottom: 1px solid var(--line);
}

.chapterVolumeHeader {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 8px 6px;
  background: #f4ede0;
}

.chapterVolumeHeader.active {
  background: var(--mark);
}

.chapterCaret {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.95em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapterCaret:hover { color: var(--ink); }

.chapterVolumeTitle {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}

.chapterVolumeTitle:hover { color: var(--accent, #8a2424); }

.chapterSectionList {
  display: flex;
  flex-direction: column;
}

.chapterVolume.collapsed .chapterSectionList { display: none; }

.chapterSectionButton {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 6px 8px 6px 24px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.chapterSectionButton:hover,
.chapterSectionButton.active {
  background: var(--mark);
}

.chapterSectionName {
  flex: 1;
  min-width: 0;
  font-size: 0.88em;
  line-height: 1.35;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.chapterSectionButton small {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: "Segoe UI", sans-serif;
  font-size: 0.75em;
  align-self: flex-start;
  padding-top: 2px;
}

.editorPanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
}

.editorRender {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 2;
  font-size: 20px;
  background: #fff;
  cursor: default;
}

.editorRender p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.editorRender p + p {
  margin-top: 0.1em;
}

.editorRender p.spacer {
  height: 0.6em;
}

.editorRender p.indent1 {
  padding-inline-start: 1em;
}

.editorRender p.indent2 {
  padding-inline-start: 2em;
}

.editorRender.isVertical {
  writing-mode: vertical-rl;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
}

.editorRender .annot {
  color: #8b7250;
  font-size: 0.82em;
}

/* Default: show render, hide textarea */
#editorPanel textarea { display: none; }
#editorPanel .editorRender { display: block; }
#editorPanel .punctBar { display: none; }

/* Edit mode: hide render, show textarea */
#editorPanel.isEditing .editorRender { display: none; }
#editorPanel.isEditing textarea { display: flex; }
#editorPanel.isEditing .punctBar { display: flex; }

/* Scroll mode: continuous flow of all segments, image follows scroll */
#editorPanel.scrollMode #editor,
#editorPanel.scrollMode .punctBar,
#editorPanel.scrollMode .metaRow { display: none !important; }
/* Page anchors are invisible zero-size markers used by scroll tracker */
.editorRender .pageAnchor {
  display: inline;
  width: 0;
  height: 0;
  overflow: hidden;
  vertical-align: baseline;
  scroll-margin-top: 8px;
  scroll-margin-inline-start: 8px;
}
.editorRender .pageAnchor::before { content: ""; }
/* Skip layout/paint of offscreen paragraphs while scrolling — major win for ~460 page docs */
#editorPanel.scrollMode .editorRender p {
  content-visibility: auto;
  contain-intrinsic-size: auto 2em;
}
body.scrollMode #segmentList .segmentButton small { display: none; }

.punctBar {
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0;
  flex: 0 0 auto;
}

.punctBar button {
  padding: 2px 10px;
  font-size: 18px;
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #faf8f5;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

.punctBar button:hover {
  background: var(--line);
}

textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 2;
  font-size: 20px;
  background: #fff;
}

.metaRow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: 10px;
}

#editorPanel:not(.isEditing) .metaRow {
  display: none;
}

#diffSummary {
  color: var(--muted);
  white-space: nowrap;
}

.versionList {
  height: calc(100% - 52px);
  margin: 0;
  padding: 12px 12px 24px 32px;
  overflow: auto;
}

.versionScrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(36, 33, 29, 0.18);
}

.versionDrawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 31;
  width: min(420px, 92vw);
  height: 100vh;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: -18px 0 36px rgba(36, 33, 29, 0.2);
  transform: translateX(100%);
  transition: transform 0.18s ease;
}

.versionDrawer.isOpen {
  transform: translateX(0);
}

.exportDialog,
.profileDialog,
.leaderboardDialog,
.legalDialog,
.variantDialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 32;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(36, 33, 29, 0.24);
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.exportDialog.isOpen,
.profileDialog.isOpen,
.leaderboardDialog.isOpen,
.legalDialog.isOpen,
.variantDialog.isOpen {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.leaderboardDialog,
.legalDialog,
.variantDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: hidden;
}

.exportBody,
.profileBody {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.leaderboardDialogBody {
  max-height: calc(min(82vh, 760px) - 54px);
  overflow: auto;
  padding: 14px 18px 20px;
}

.globalLeaderboardList {
  margin: 0;
  padding-left: 28px;
}

.globalLeaderboardList li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.globalLeaderboardList strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.globalLeaderboardList span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

.legalDialogBody {
  max-height: calc(min(82vh, 760px) - 54px);
  overflow: auto;
  padding: 16px 18px 20px;
}

.legalDialogBody section + section {
  margin-top: 18px;
}

.legalDialogBody h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.legalDialogBody p,
.legalDialogBody li {
  font-size: 15px;
  line-height: 1.75;
}

.legalDialogBody p {
  margin: 0 0 8px;
}

.legalDialogBody ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

.profileBody label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 14px;
}

.profileBody input {
  width: 100%;
}

.profileBody p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.rewardPanel,
.profileProposalPanel,
.leaderboardPanel {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}

.rewardPanel span,
.profileProposalPanel > span,
.leaderboardPanel > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
}

.profileProposalPanel button {
  margin-top: 10px;
}

.rewardPanel strong {
  display: block;
  font-size: 1.2rem;
}

.rewardPanel p {
  margin-top: 6px;
}

.leaderboardPanel ol {
  margin: 8px 0 0;
  padding-left: 22px;
}

.leaderboardPanel li {
  margin: 8px 0;
  color: var(--ink);
}

.leaderboardPanel li strong {
  display: block;
  font-size: 1rem;
}

.leaderboardPanel li span {
  color: var(--muted);
  font-size: 14px;
}

.profileActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.checkOption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--ink);
}

.checkOption input {
  width: 18px;
  height: 18px;
}

/* ── Review dialog ── */

.reviewBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

.reviewCounter {
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}

.reviewDialog {
  position: fixed;
  inset: 32px;
  z-index: 40;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(36, 33, 29, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.reviewDialog.isOpen {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.reviewBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.reviewImagePane {
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f0ece4;
  padding: 12px;
}

.reviewImagePane.isHidden { display: none; }

/* 無影像區（非 admin 的我的提案）：dialog 收窄置中、文字區佔滿單欄 */
.reviewDialog:has(.reviewImagePane.isHidden) {
  inset: 32px 0;
  max-width: 720px;
  margin-inline: auto;
}
.reviewDialog:has(.reviewImagePane.isHidden) .reviewBody {
  grid-template-columns: 1fr;
}

.reviewImagePane img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 18px rgba(36, 33, 29, 0.18);
}

.reviewTextPane {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  overflow: hidden;
}

.reviewNote {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  flex: 0 0 auto;
}

.reviewDiff {
  flex: 1;
  overflow-y: auto;
  font-size: 17px;
  line-height: 2.2;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #faf7f0;
}

.reviewDiff p {
  margin: 2px 0;
  padding: 2px 8px;
  border-radius: 4px;
  word-break: break-all;
}

.diffCtx { color: var(--muted); }
.diffAdd { background: #d4f5dd; color: #165c26; }
.diffDel { background: #fde8e8; color: #8b1a1a; text-decoration: line-through; }
.diffPageTag {
  display: inline-block;
  min-width: 2.5em;
  padding: 0 .3em;
  margin-right: .3em;
  font-size: .8em;
  background: #eaeaea;
  color: #555;
  border-radius: 3px;
  text-decoration: none;
  vertical-align: middle;
}
.diffAdd .diffPageTag, .diffDel .diffPageTag { background: rgba(0,0,0,.08); }

.reviewEditPane {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reviewEditLabel {
  font-size: 12px;
  color: var(--muted);
}

.reviewEditInput {
  flex: 0 0 auto;
  width: 100%;
  resize: vertical;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  line-height: 1.9;
  font-size: 16px;
  background: #fff;
}

.reviewActions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.reviewActionsGap {
  flex: 1 1 auto;
}

.versionDrawer .versionList {
  height: calc(100% - 52px);
}

.versionList li {
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.versionList strong {
  display: block;
  margin-bottom: 4px;
}

.versionList p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.loginGate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.loginGate.isHidden {
  display: none;
}

.loginCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(36, 33, 29, 0.12);
  text-align: center;
}

.loginCard h2 {
  margin: 0;
  font-size: 1.4rem;
}

.loginCard p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.loginCard .loginSubtitle {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 160px minmax(0, 1fr);
  }

  .workspace.hasImage {
    grid-template-columns: 1fr;
    grid-template-rows: 160px minmax(220px, 38%) minmax(0, 1fr);
  }

  .segmentList {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .imagePane {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .rightPane {
    height: auto;
  }
}

@media (max-width: 720px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar {
    justify-content: flex-start;
  }

  .bookPicker {
    width: 100%;
    min-width: 0;
  }

  .bookPickerPanel {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 36px));
  }

  .segmentList {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metaRow {
    grid-template-columns: 1fr;
  }
}

/* === 簡繁異體字對照表樣式 === */
.variantDialogBody {
  max-height: calc(min(82vh, 760px) - 54px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 20px;
}

.variantIntro {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.variantSearchRow {
  margin-bottom: 12px;
}

.variantSearchRow input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

.variantTableContainer {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #faf7f0;
}

.variantTable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.variantTable th,
.variantTable td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.variantTable th {
  background: #f4ede0;
  position: sticky;
  top: 0;
  z-index: 5;
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

.variantTable td {
  font-size: 18px;
  font-family: inherit;
  color: var(--ink);
}

.variantTable tbody tr:hover {
  background: rgba(244, 237, 224, 0.4);
}