:root {
  --ink: #152827;
  --muted: #6c7b78;
  --paper: #f6f2e9;
  --paper-deep: #ece6d9;
  --mint: #dcebe3;
  --teal: #12645f;
  --teal-dark: #0e4845;
  --coral: #e99372;
  --line: rgba(21, 40, 39, 0.13);
  --shadow: 0 24px 70px rgba(31, 63, 54, 0.17);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
}
button, label { font: inherit; }
button { border: 0; cursor: pointer; }
.app-shell { min-height: 100vh; overflow: hidden; }
body.reading-mode { overflow: hidden; }
body.reading-mode .topbar, body.reading-mode .footer { display: none; }
body.reading-mode .workspace { width: min(1680px, calc(100% - 20px)); }
body.reading-mode .reader-stage { margin: 12px 0 18px; }
.reader-stage { --sidebar-width: 190px; --sidebar-scale: 1; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(24px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  background: rgba(246, 242, 233, 0.9);
}
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--paper);
  background: var(--teal);
  border-radius: 14px 14px 14px 5px;
  font-family: "Noto Serif Thai", serif;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 6px 6px 0 #b9d5c9;
}
.eyebrow {
  margin: 0 0 3px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
}
.eyebrow.warm { color: #ae6348; }
.topbar h1 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.topbar-status { color: var(--muted); font-size: 12px; }
.auth-user-bar { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.text-button { padding: 5px 0; color: var(--teal); background: transparent; font-size: 12px; font-weight: 700; }
.text-button:hover { color: var(--teal-dark); text-decoration: underline; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #54a66f; box-shadow: 0 0 0 4px rgba(84, 166, 111, .14); }
.workspace { width: min(1520px, calc(100% - 40px)); margin: 0 auto; }
.intro-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); gap: clamp(40px, 7vw, 100px); align-items: center; padding: 72px 0 66px; }
.intro-copy { max-width: 570px; }
.intro-copy h2, .bottom-panel h2 { margin: 17px 0 22px; font-family: "Noto Serif Thai", serif; font-size: clamp(34px, 5vw, 62px); font-weight: 600; line-height: 1.13; letter-spacing: -.055em; }
.intro-copy h2 em { color: var(--teal); font-style: normal; }
.intro-text { max-width: 510px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.primary-button, .secondary-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button { color: #fff; background: var(--teal); box-shadow: 0 8px 18px rgba(18, 100, 95, .2); }
.secondary-button { color: var(--teal); background: transparent; border: 1px solid rgba(18,100,95,.35); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.hint { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
.hero-card { position: relative; min-height: 440px; isolation: isolate; }
.hero-card::before { position: absolute; inset: 8% 2% 3% 5%; z-index: -2; content: ""; border-radius: 42px; background: linear-gradient(145deg, #c6e0d0, #e9cab8 75%); transform: rotate(4deg); }
.hero-card::after { position: absolute; inset: 0 8% 9% 0; z-index: -1; content: ""; border: 1px solid rgba(255,255,255,.8); border-radius: 42px; background: linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.03)); box-shadow: var(--shadow); }
.hero-glow { position: absolute; right: 15%; top: 10%; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.36); filter: blur(6px); }
.mock-book { position: absolute; top: 52px; left: 50%; width: 260px; height: 340px; transform: translateX(-46%) rotate(-7deg); perspective: 1000px; }
.mock-page { position: absolute; width: 100%; height: 100%; border-radius: 6px 15px 15px 6px; box-shadow: 18px 22px 28px rgba(23,52,43,.2); }
.back-page { left: 25px; top: 12px; background: #a8c4b4; transform: rotate(8deg); }
.front-page { overflow: hidden; padding: 34px 29px; color: #f9f4e8; background: linear-gradient(155deg, #0f5552, #1b776b); }
.front-page::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 70% 26%, rgba(236,198,130,.7) 0 2px, transparent 3px), radial-gradient(circle at 45% 62%, rgba(255,255,255,.19) 0 1px, transparent 2px); background-size: 90px 90px, 45px 45px; opacity: .75; }
.page-rule { position: absolute; top: 19px; left: 28px; right: 28px; height: 1px; background: rgba(255,255,255,.5); }
.cover-kicker { position: relative; margin: 0 0 42px; font-size: 8px; letter-spacing: .2em; opacity: .8; }
.front-page h3 { position: relative; margin: 0; font-family: "Noto Serif Thai", serif; font-size: 41px; line-height: 1.08; letter-spacing: -.08em; }
.front-page h3 span { color: #f0c687; }
.cover-caption { position: absolute; bottom: 25px; margin: 0; color: #d3e3d9; font-size: 10px; letter-spacing: .08em; }
.cover-orbit { position: absolute; right: -40px; bottom: 40px; width: 170px; height: 170px; border: 1px solid rgba(240,198,135,.55); border-radius: 50%; box-shadow: 0 0 0 14px rgba(240,198,135,.1), 0 0 0 31px rgba(240,198,135,.07); }
.floating-note { position: absolute; display: grid; gap: 1px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 13px; background: rgba(255,255,255,.64); box-shadow: 0 15px 30px rgba(31,63,54,.1); backdrop-filter: blur(12px); }
.floating-note span { color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.floating-note b { font-size: 12px; }
.floating-note small { color: var(--muted); font-size: 10px; }
.note-one { top: 54px; right: 7%; }
.note-two { right: 2%; bottom: 32px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 68px; }
.quick-card { display: flex; gap: 15px; min-height: 150px; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.38); }
.active-card { border-color: rgba(18,100,95,.3); background: var(--mint); }
.card-icon { display: grid; flex: 0 0 auto; width: 37px; height: 37px; place-items: center; color: #fff; border-radius: 50%; background: var(--teal); font-size: 11px; font-weight: 700; }
.outline-icon { color: var(--teal); background: transparent; border: 1px solid rgba(18,100,95,.32); }
.card-label { margin: 0 0 3px; color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.quick-card h3 { margin: 0 0 7px; font-size: 16px; }
.quick-card p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.bottom-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; padding: 52px 0 60px; border-top: 1px solid var(--line); }
.bottom-panel h2 { margin: 12px 0 0; font-size: clamp(27px, 3vw, 41px); }
.workflow-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-self: center; margin: 0; padding: 0; list-style: none; }
.workflow-list li { position: relative; display: grid; gap: 9px; padding: 0 14px; border-left: 1px solid var(--line); }
.workflow-list li:first-child { border-left: 0; }
.workflow-list li::after { position: absolute; top: 15px; right: -4px; width: 7px; height: 7px; content: ""; border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: rotate(45deg); }
.workflow-list li:last-child::after { display: none; }
.workflow-list span { color: var(--coral); font-size: 11px; font-weight: 700; }
.workflow-list b { display: block; font-size: 14px; }
.workflow-list small { color: var(--muted); font-size: 10px; }
.workflow-list .current b { color: var(--teal); }
.footer { display: flex; justify-content: space-between; padding: 20px clamp(24px, 5vw, 76px); color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; }
.auth-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(246,242,233,.96); }
.auth-card { width: min(100%, 480px); padding: clamp(28px, 6vw, 52px); border: 1px solid rgba(18,100,95,.16); border-radius: 28px; background: rgba(255,255,255,.78); box-shadow: var(--shadow); }
.auth-card-mark { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 22px; color: var(--paper); background: var(--teal); border-radius: 16px 16px 16px 6px; box-shadow: 6px 6px 0 #b9d5c9; font-family: "Noto Serif Thai", serif; font-size: 27px; font-weight: 700; }
.auth-card h2 { margin: 10px 0 8px; font-family: "Noto Serif Thai", serif; font-size: clamp(28px, 5vw, 42px); line-height: 1.15; letter-spacing: -.04em; }
.auth-hint { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-status { min-height: 22px; margin: 0 0 12px; color: #ae6348; font-size: 13px; line-height: 1.5; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-form input { width: 100%; min-height: 46px; padding: 0 13px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 10px; background: #fff; outline: none; font-size: 14px; }
.auth-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,100,95,.12); }
.auth-submit { width: 100%; margin-top: 5px; }
.auth-security-note { margin: 20px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-recovery-link { justify-self: center; margin-top: 4px; color: var(--teal); font-size: 12px; }
.auth-recovery-notice { display: grid; gap: 12px; margin: 14px 0; padding: 15px; border: 1px solid rgba(174,99,72,.35); border-radius: 14px; background: rgba(247,235,220,.78); }
.auth-recovery-notice p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-recovery-notice code { display: block; padding: 12px; color: var(--ink); border: 1px dashed rgba(18,100,95,.35); border-radius: 9px; background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.family-recovery-box { display: grid; gap: 10px; margin: 14px 0; padding: 13px; border: 1px solid rgba(174,99,72,.25); border-radius: 12px; background: rgba(247,235,220,.5); }
.family-recovery-box > div:first-child { display: grid; gap: 4px; }
.family-recovery-box strong { font-size: 12px; }
.family-recovery-box small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.family-recovery-box .auth-recovery-notice { margin: 0; }
.family-user-form { display: grid; gap: 10px; margin: 16px 0 14px; padding: 14px; border: 1px solid rgba(18,100,95,.15); border-radius: 14px; background: rgba(220,235,227,.34); }
.family-user-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.family-user-form .checkbox-row { display: flex; grid-template-columns: none; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 11px; line-height: 1.5; }
.family-user-form .checkbox-row input { width: 16px; min-height: 16px; margin-top: 1px; accent-color: var(--teal); }
.family-user-form input { min-height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid rgba(18,100,95,.2); border-radius: 8px; background: #fff; font-size: 13px; }
.family-user-form .primary-button { min-height: 38px; }
.family-users-list { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.family-user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.62); }
.family-user-row strong { display: block; font-size: 13px; }
.family-user-row small { color: var(--muted); font-size: 10px; }
.family-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; flex: 0 0 auto; }
.family-user-actions button { min-height: 28px; padding: 0 8px; color: var(--teal); background: transparent; border: 1px solid rgba(18,100,95,.22); border-radius: 7px; font-size: 10px; font-weight: 700; }
.family-user-actions button.danger { color: #a5553e; border-color: rgba(165,85,62,.3); }
.book-permissions-card { width: min(640px, 100%); max-height: calc(100dvh - 32px); overscroll-behavior: contain; scrollbar-gutter: stable; }
.book-permissions-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; margin-top: 12px; }
.book-permissions-filter { min-height: 44px; padding: 0 10px; color: var(--ink); border: 1px solid rgba(18,100,95,.24); border-radius: 8px; background: #fff; font-size: 12px; }
.book-permissions-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.book-permissions-actions .compact-button { flex: 1 1 120px; }
.book-permissions-summary { min-height: 18px; margin: 9px 0 4px; color: var(--teal); font-size: 11px; font-weight: 700; }
.book-permissions-list { display: grid; gap: 8px; max-height: min(40dvh, 360px); overflow-y: auto; padding: 2px; }
.book-permission-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.68); }
.book-permission-row.is-locked { background: rgba(220,235,227,.45); }
.book-permission-info { display: grid; gap: 3px; min-width: 0; }
.book-permission-info strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.book-permission-info small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.book-permission-toggle { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--teal); font-size: 11px; font-weight: 700; cursor: pointer; }
.book-permission-toggle input { width: 17px; height: 17px; accent-color: var(--teal); }
.book-permission-toggle input:disabled { cursor: not-allowed; opacity: .7; }
.book-permission-locked { color: var(--muted); font-size: 10px; font-weight: 700; text-align: right; }
.hidden { display: none !important; }
.reader-stage { margin: 24px 0 48px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.38); box-shadow: var(--shadow); overflow: hidden; }
.reader-sidebar-brand { display: flex; align-items: center; gap: calc(9px * var(--sidebar-scale)); margin: 0 calc(3px * var(--sidebar-scale)) calc(22px * var(--sidebar-scale)); padding-bottom: calc(16px * var(--sidebar-scale)); border-bottom: 1px solid var(--line); }
.reader-sidebar-brand .eyebrow { margin: 0 0 3px; font-size: calc(9px * var(--sidebar-scale)); letter-spacing: .12em; }
.reader-sidebar-brand strong { display: block; color: var(--teal); font-size: calc(15px * var(--sidebar-scale)); }
.small-brand-mark { width: calc(30px * var(--sidebar-scale)); height: calc(30px * var(--sidebar-scale)); border-radius: 10px 10px 10px 4px; font-size: calc(16px * var(--sidebar-scale)); box-shadow: 4px 4px 0 #b9d5c9; }
.reader-single-page .right-paper { display: none; }
.reader-single-page .page-spread { justify-content: center; }
.reader-stage:fullscreen { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--reader-background, #f0eadf); }
.reader-stage:fullscreen .overlay-editor { position: fixed; }
.reader-stage:fullscreen .interaction-drawer { position: fixed; top: 74px; right: 16px; bottom: 54px; }
.reader-stage:fullscreen { display: flex; flex-direction: column; }
.reader-stage:fullscreen .reader-body { min-height: 0; height: 0; flex: 1 1 auto; }
.reader-stage:fullscreen .book-reader { min-height: 0; height: 100%; }
.reader-stage:fullscreen .thumbnail-list { max-height: none; }
.reader-stage:fullscreen .reader-note { flex: 0 0 auto; }
body.reader-pseudo-fullscreen { overflow: hidden; }
.reader-stage.reader-pseudo-fullscreen { position: fixed; z-index: 120; inset: 0; width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--reader-background, #f0eadf); display: flex; flex-direction: column; }
.reader-stage.reader-pseudo-fullscreen .overlay-editor { position: fixed; }
.reader-stage.reader-pseudo-fullscreen .reader-body { min-height: 0; height: 0; flex: 1 1 auto; }
.reader-stage.reader-pseudo-fullscreen .book-reader { min-height: 0; height: 100%; }
.reader-stage.reader-pseudo-fullscreen .thumbnail-list { max-height: none; }
.reader-stage.reader-pseudo-fullscreen .reader-note { flex: 0 0 auto; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.58); }
.reader-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reader-title-wrap h2 { margin: 0; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Noto Serif Thai", serif; font-size: clamp(20px, 1.45vw, 25px); }
.icon-button, .toolbar-button, .round-control { display: inline-grid; place-items: center; color: var(--teal); background: transparent; border: 1px solid rgba(18,100,95,.25); border-radius: 999px; }
.icon-button { width: 44px; height: 44px; font-size: 24px; }
.reader-actions { display: flex; align-items: center; gap: 8px; }
.toolbar-button { min-width: 44px; height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; }
.zoom-label { min-width: 54px; color: var(--muted); font-size: 14px; text-align: center; }
.reader-body { position: relative; display: grid; grid-template-columns: var(--sidebar-width) 10px minmax(0, 1fr); height: calc(100dvh - 164px); min-height: 560px; }
.reader-body.reader-no-sidebar { grid-template-columns: minmax(0, 1fr); }
.reader-body.reader-no-sidebar .book-reader { grid-column: 1 / -1; }
.reader-body.reader-no-sidebar .reader-sidebar, .reader-body.reader-no-sidebar .sidebar-resizer { display: none; }
.reader-stage:fullscreen .reader-body { display: grid; }
.reader-sidebar { display: flex; flex-direction: column; min-height: 0; padding: calc(18px * var(--sidebar-scale)) calc(14px * var(--sidebar-scale)); border-right: 1px solid var(--line); background: rgba(220,235,227,.45); overflow: hidden; }
.sidebar-heading { display: flex; justify-content: space-between; gap: calc(8px * var(--sidebar-scale)); margin: 0 calc(4px * var(--sidebar-scale)) calc(12px * var(--sidebar-scale)); }
.sidebar-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(5px * var(--sidebar-scale)); margin: 0 0 calc(10px * var(--sidebar-scale)); }
.sidebar-tab { min-height: calc(30px * var(--sidebar-scale)); padding: 0 calc(5px * var(--sidebar-scale)); color: var(--muted); background: rgba(255,255,255,.48); border: 1px solid rgba(18,100,95,.16); border-radius: 7px; font-size: calc(11px * var(--sidebar-scale)); font-weight: 700; }
.sidebar-tab.active { color: #fff; background: var(--teal); border-color: var(--teal); }
.sidebar-resizer { position: relative; z-index: 12; width: 10px; cursor: col-resize; background: transparent; }
.sidebar-resizer::after { position: absolute; inset: 0 4px; content: ""; border-left: 1px solid rgba(18,100,95,.18); border-right: 1px solid rgba(18,100,95,.08); }
.sidebar-resizer:hover::after, body.sidebar-resizing .sidebar-resizer::after { border-color: var(--teal); background: rgba(18,100,95,.08); }
body.sidebar-resizing, body.sidebar-resizing * { cursor: col-resize !important; user-select: none !important; }
.sidebar-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.sidebar-panel .thumbnail-list { height: auto; flex: 1 1 auto; }
.toc-list { display: grid; gap: 5px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.toc-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; width: 100%; padding: 8px 7px; color: var(--ink); background: rgba(255,255,255,.5); border: 1px solid transparent; border-radius: 7px; text-align: left; cursor: pointer; }
.toc-item:hover, .toc-item:focus-visible { border-color: rgba(18,100,95,.35); background: #fff; }
.toc-item.active { color: var(--teal); border-color: var(--teal); background: #fff; }
.toc-title { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; }
.toc-page { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.toc-level-1 { padding-left: 13px; }
.toc-level-2 { padding-left: 21px; }
.toc-level-3 { padding-left: 29px; }
.toc-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 8px; color: var(--teal); font-size: 11px; font-weight: 700; }
.toc-add-button { padding: 5px 7px; color: #fff; background: var(--teal); border-radius: 6px; font-size: 10px; font-weight: 700; }
.toc-form { display: grid; gap: 7px; margin-bottom: 9px; padding: 9px; border: 1px solid rgba(18,100,95,.2); border-radius: 8px; background: rgba(255,255,255,.7); }
.toc-form label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.toc-form input, .toc-form select { width: 100%; min-height: 27px; padding: 3px 5px; color: var(--ink); border: 1px solid rgba(18,100,95,.25); border-radius: 5px; background: #fff; font-size: 11px; }
.toc-form-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px; }
.toc-form-actions { display: flex; justify-content: flex-end; gap: 5px; }
.toc-cancel-button, .toc-save-button { min-height: 27px; padding: 0 7px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.toc-cancel-button { color: var(--muted); background: var(--paper-deep); }
.toc-save-button { color: #fff; background: var(--teal); }
.toc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; align-items: stretch; }
.toc-actions { display: grid; grid-template-columns: repeat(2, 20px); grid-template-rows: repeat(2, 20px); gap: 2px; }
.toc-action { display: grid; place-items: center; padding: 0; color: var(--teal); background: rgba(255,255,255,.7); border: 1px solid rgba(18,100,95,.18); border-radius: 4px; font-size: 11px; }
.toc-action:hover { background: #fff; }
.toc-empty { margin: 16px 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.sidebar-heading span { color: var(--teal); font-size: calc(12px * var(--sidebar-scale)); font-weight: 700; letter-spacing: .12em; }
.sidebar-heading b { color: var(--muted); font-size: calc(12px * var(--sidebar-scale)); }
.thumbnail-list { display: grid; gap: 12px; height: auto; max-height: none; overflow-y: auto; padding-right: 2px; }
.thumbnail-item { display: grid; gap: calc(5px * var(--sidebar-scale)); padding: calc(6px * var(--sidebar-scale)); color: var(--muted); background: rgba(255,255,255,.5); border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.thumbnail-item.active { color: var(--teal); border-color: var(--teal); background: #fff; }
.thumbnail-item canvas { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; }
.thumbnail-number { font-size: calc(12px * var(--sidebar-scale)); text-align: center; }
.book-reader { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 22px 24px 28px; background: var(--reader-background, radial-gradient(circle at 50% 30%, rgba(220,235,227,.52), transparent 48%), #f0eadf); overflow: hidden; }
.reader-scroll { position: relative; min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.page-spread { display: flex; align-items: flex-start; justify-content: center; width: max-content; height: max-content; min-width: 1px; min-height: 1px; flex: 0 0 auto; margin: 14px auto 92px; transform-origin: top center; transition: transform .18s ease; filter: drop-shadow(0 20px 18px rgba(21,40,39,.17)); }
.paper-page { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: max-content; height: max-content; min-width: 0; min-height: 0; padding: 10px; background: #fffdf8; overflow: visible; }
.paper-page canvas { position: relative; z-index: 1; display: block; width: auto; max-width: none; height: auto; max-height: none; }
.overlay-layer { position: absolute; z-index: 2; top: 10px; left: 10px; pointer-events: none; touch-action: none; }
.reader-overlay-editing .overlay-layer { pointer-events: auto; }
.overlay-link { position: absolute; display: block; border: 1px solid transparent; border-radius: 5px; background: transparent; cursor: pointer; pointer-events: auto; }
.overlay-link:hover, .overlay-link:focus-visible { outline: 2px solid rgba(18,100,95,.65); background: rgba(18,100,95,.08); }
.reader-overlay-editing .overlay-link { border: 2px dashed var(--coral); background: rgba(233,147,114,.13); cursor: move; }
.reader-overlay-editing .overlay-link::after { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; content: ""; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); }
.overlay-resize-handle { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; cursor: nwse-resize; }
.overlay-editor { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(21,40,39,.18); }
.overlay-editor-card { width: min(420px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.overlay-editor-card h3 { margin: 5px 0 8px; font-family: "Noto Serif Thai", serif; font-size: 24px; }
.overlay-editor-hint { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.overlay-editor-card label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.overlay-editor-card input { min-height: 42px; padding: 0 11px; color: var(--ink); border: 1px solid rgba(18,100,95,.25); border-radius: 8px; background: #fff; font-size: 14px; }
.overlay-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.paper-page canvas { display: block !important; flex: 0 0 auto; }
.right-paper { border-left: 1px solid rgba(21,40,39,.15); }
.reader-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); background: rgba(246,242,233,.75); z-index: 5; }
.reader-loading p { margin: 0; font-size: 13px; }
.loading-ring { width: 29px; height: 29px; border: 3px solid rgba(18,100,95,.2); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.reader-controls { display: flex; position: absolute; z-index: 10; left: 50%; bottom: 16px; align-items: center; gap: 16px; transform: translateX(-50%); padding: 7px 11px; border: 1px solid rgba(21,40,39,.11); border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: 0 8px 20px rgba(21,40,39,.1); backdrop-filter: blur(10px); }
.image-edit-toolbar { position: absolute; z-index: 14; top: 14px; left: 50%; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(620px, calc(100% - 32px)); transform: translateX(-50%); padding: 9px 11px 9px 14px; border: 1px solid rgba(18,100,95,.28); border-radius: 12px; background: rgba(255,253,248,.96); box-shadow: 0 10px 28px rgba(21,40,39,.18); backdrop-filter: blur(10px); }
.image-edit-toolbar-copy { display: grid; gap: 2px; min-width: 0; }
.image-edit-toolbar-copy strong { color: var(--teal); font-size: 12px; }
.image-edit-toolbar-copy span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.image-edit-toolbar-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.image-edit-toolbar-actions button { min-height: 30px; }
.image-edit-toolbar.with-editor-drawer { left: 16px; right: 372px; width: auto; transform: none; }
.reader-image-editing .overlay-layer { pointer-events: auto; }
.reader-image-editing .image-overlay { border: 1px dashed rgba(18,100,95,.65); cursor: move; }
.reader-image-editing .image-overlay.selected { border: 2px dashed var(--coral); box-shadow: 0 0 0 2px rgba(233,147,114,.18); }
.round-control { width: 42px; height: 42px; font-size: 30px; line-height: 1; }
.page-position { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; }
.page-position input { width: 50px; height: 34px; padding: 0 4px; color: var(--teal); font-size: 15px; text-align: center; border: 1px solid rgba(18,100,95,.3); border-radius: 7px; background: #fff; }
.editor-category { border-bottom: 1px solid var(--line); }
.editor-category > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 2px; color: var(--teal); cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.editor-category > summary::-webkit-details-marker { display: none; }
.editor-category > summary::before { width: 18px; color: var(--coral); content: "▸"; font-size: 14px; letter-spacing: 0; }
.editor-category[open] > summary::before { content: "▾"; }
.editor-category > summary span { flex: 1; }
.editor-category > summary small { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.editor-category-body { display: grid; gap: 7px; padding: 0 0 14px; }
.editor-subtool { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; color: var(--ink); background: rgba(255,255,255,.55); border: 1px solid rgba(18,100,95,.13); border-radius: 8px; text-align: left; }
.editor-subtool span { font-size: 12px; font-weight: 600; }
.editor-subtool small { color: var(--muted); font-size: 10px; }
.editor-subtool:hover, .editor-subtool:focus-visible { color: var(--teal); background: rgba(220,235,227,.55); border-color: rgba(18,100,95,.35); }
.editor-subtool.muted-tool { opacity: .62; }
.style-audio-section { margin-top: 3px; padding: 12px 0 0; border-top: 1px dashed rgba(18,100,95,.18); }
.editor-submodal { position: absolute; z-index: 45; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(21,40,39,.2); backdrop-filter: blur(2px); }
.editor-submodal-card { width: min(560px, 100%); max-height: min(680px, 90%); overflow-y: auto; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 24px 70px rgba(21,40,39,.28); }
.editor-submodal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.editor-submodal-head h3 { margin: 3px 0 0; font-family: "Noto Serif Thai", serif; font-size: 22px; }
.editor-submodal-hint { margin: 14px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.editor-submodal-body { display: grid; gap: 9px; }
.editor-setting-note { padding: 12px; color: var(--muted); background: rgba(220,235,227,.42); border: 1px solid rgba(18,100,95,.16); border-radius: 9px; font-size: 12px; line-height: 1.6; }
.editor-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.editor-setting-card { display: grid; gap: 5px; padding: 11px; background: rgba(255,255,255,.56); border: 1px solid rgba(18,100,95,.14); border-radius: 9px; }
.editor-setting-card label { color: var(--muted); font-size: 11px; font-weight: 700; }
.editor-setting-card select, .editor-setting-card input { min-height: 34px; padding: 0 8px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-size: 12px; }
.editor-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; color: var(--ink); background: rgba(255,255,255,.56); border: 1px solid rgba(18,100,95,.14); border-radius: 9px; cursor: pointer; }
.editor-toggle-card > span:first-child { display: grid; gap: 3px; }
.editor-toggle-card strong { font-size: 13px; }
.editor-toggle-card small { color: var(--muted); font-size: 11px; }
.editor-toggle-card input { position: absolute; opacity: 0; pointer-events: none; }
.editor-toggle-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: #c8d2cd; transition: background .18s ease; }
.editor-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(21,40,39,.22); transition: transform .18s ease; }
.editor-toggle-card:has(input:checked) .editor-toggle-track { background: var(--teal); }
.editor-toggle-card:has(input:checked) .editor-toggle-track::after { transform: translateX(18px); }
.editor-submodal-done { width: 100%; margin-top: 16px; min-height: 36px; }
.audio-conflict-modal { z-index: 60; }
.audio-conflict-card { width: min(540px, 100%); }
.audio-conflict-list { display: grid; gap: 7px; margin: 12px 0 16px; }
.audio-conflict-item { padding: 10px 12px; color: var(--ink); background: rgba(233,147,114,.1); border: 1px solid rgba(233,147,114,.35); border-radius: 8px; font-size: 12px; line-height: 1.5; }
.audio-conflict-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.audio-conflict-actions button { min-height: 34px; }
.interaction-drawer { position: absolute; z-index: 25; top: 74px; right: 16px; bottom: 54px; display: flex; flex-direction: column; width: min(340px, calc(100% - 32px)); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.97); box-shadow: 0 18px 45px rgba(21,40,39,.22); }
.interaction-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.interaction-drawer-head h3 { margin: 2px 0 0; font-family: "Noto Serif Thai", serif; font-size: 20px; }
.drawer-close { width: 30px; height: 30px; color: var(--teal); background: var(--paper-deep); border-radius: 50%; font-size: 20px; }
.interaction-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.interaction-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.interaction-status { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.interaction-tool { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; color: var(--ink); background: rgba(220,235,227,.35); border: 1px solid rgba(18,100,95,.18); border-radius: 9px; text-align: left; }
.interaction-tool.active, .interaction-tool:hover { color: var(--teal); background: rgba(220,235,227,.7); border-color: var(--teal); }
.interaction-tool-icon { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--teal); border-radius: 7px; font-size: 18px; }
.interaction-tool b, .interaction-tool small { display: block; }
.interaction-tool b { font-size: 13px; }
.interaction-tool small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.selected-overlay-panel { margin-top: 10px; padding: 10px; border: 1px solid rgba(233,147,114,.4); border-radius: 9px; background: rgba(233,147,114,.1); }
.selected-overlay-title { margin: 0 0 4px; color: var(--coral); font-size: 11px; font-weight: 700; }
.selected-overlay-url { margin: 0 0 9px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.selected-overlay-actions, .audio-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.selected-overlay-actions button, .audio-actions button { min-height: 28px; padding: 0 8px; color: var(--teal); background: #fff; border: 1px solid rgba(18,100,95,.2); border-radius: 6px; font-size: 10px; font-weight: 700; }
.selected-overlay-actions .danger-button { color: #a33e2e; border-color: rgba(163,62,46,.3); }
.confirm-editor-button { width: 100%; min-height: 36px; margin-top: 12px; padding: 0 12px; color: #fff; background: var(--teal); border: 1px solid var(--teal); border-radius: 8px; font-size: 12px; font-weight: 700; }
.confirm-editor-button:hover { background: var(--teal-dark); }
.confirm-editor-button:focus-visible { outline: 3px solid rgba(233,147,114,.55); outline-offset: 2px; }
.audio-file-button { display: grid; place-items: center; min-height: 38px; color: var(--teal); background: rgba(220,235,227,.35); border: 1px dashed rgba(18,100,95,.35); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.audio-range-form { margin-top: 9px; padding: 9px; border: 1px solid rgba(18,100,95,.18); border-radius: 8px; background: rgba(220,235,227,.3); }
.audio-range-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; align-items: end; }
.audio-range-row label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.audio-range-row input { width: 100%; min-height: 28px; padding: 0 5px; border: 1px solid rgba(18,100,95,.22); border-radius: 5px; font-size: 11px; }
.audio-range-row > button { min-height: 28px; padding: 0 8px; color: #fff; background: var(--teal); border-radius: 5px; font-size: 10px; font-weight: 700; }
.audio-range-help { margin: -3px 0 7px; color: var(--muted); font-size: 10px; }
.audio-range-form-actions { display: flex; gap: 5px; align-items: end; }
.audio-range-form-actions > button { white-space: nowrap; }
.nas-audio-range-form { border-color: rgba(18,100,95,.32); background: rgba(220,235,227,.48); }
.audio-list { display: grid; gap: 6px; max-height: 270px; overflow-y: auto; margin-top: 9px; }
.audio-row { position: relative; display: grid; grid-template-columns: 26px minmax(80px,1fr) 58px 58px 26px; gap: 4px; align-items: center; padding: 6px; border: 1px solid rgba(18,100,95,.15); border-radius: 7px; background: rgba(255,255,255,.68); }
.audio-delete { width: 25px; height: 28px; color: #fff; background: #dc6c6c; border-radius: 5px; font-size: 13px; }
.audio-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.audio-row select, .audio-page-field input { min-height: 28px; padding: 0 3px; color: var(--muted); border: 1px solid rgba(18,100,95,.18); border-radius: 5px; background: #fff; font-size: 9px; }
.audio-page-field { display: grid; gap: 2px; color: var(--muted); font-size: 8px; font-weight: 700; }
.audio-page-field input { width: 100%; min-width: 0; }
.background-audio-modal-card { width: min(940px, 100%); max-height: min(820px, 92%); }
.audio-modal-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.audio-modal-tab { min-height: 34px; padding: 0 18px; color: var(--muted); background: transparent; border-bottom: 3px solid transparent; font-size: 12px; font-weight: 700; }
.audio-modal-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.audio-modal-tab.muted { opacity: .55; }
.audio-modal-add { display: grid; gap: 8px; }
.audio-modal-toolbar { display: grid; grid-template-columns: auto minmax(180px, 1fr) 210px; gap: 8px; align-items: center; margin-top: 14px; padding: 9px; border: 1px solid rgba(18,100,95,.14); border-radius: 9px; background: rgba(220,235,227,.3); }
.audio-modal-toolbar strong { color: var(--teal); font-size: 12px; white-space: nowrap; }
.audio-modal-toolbar input, .audio-modal-toolbar select { min-height: 34px; padding: 0 9px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-size: 11px; }
.audio-modal-list { max-height: min(48vh, 440px); margin-top: 10px; padding-right: 4px; }
.background-audio-modal .audio-row { grid-template-columns: 30px minmax(180px,1fr) 92px 92px minmax(150px,auto) 30px; gap: 8px; padding: 8px; }
.audio-playback-summary { min-width: 0; overflow: hidden; color: var(--teal); font-size: 10px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.audio-row-nas .audio-playback-summary { color: var(--teal-dark); }
.background-audio-modal .audio-name { font-size: 12px; }
.background-audio-modal .audio-delete, .background-audio-modal .audio-options-button { width: 30px; height: 32px; }
.audio-empty { margin: 18px 0; padding: 20px; color: var(--muted); text-align: center; border: 1px dashed rgba(18,100,95,.2); border-radius: 9px; }
.audio-current-label { margin: 14px 0 6px; color: var(--teal); font-size: 11px; font-weight: 700; }
.audio-options-button { width: 25px; height: 28px; color: var(--teal); background: rgba(220,235,227,.45); border-radius: 5px; font-size: 15px; }
.audio-options-menu { position: absolute; z-index: 40; top: 38px; right: 5px; display: grid; min-width: 172px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: #fffdf8; box-shadow: 0 10px 25px rgba(21,40,39,.2); }
.audio-options-menu button { padding: 7px; color: var(--ink); background: transparent; border-radius: 4px; text-align: left; font-size: 11px; }
.audio-options-menu button:hover { color: var(--teal); background: rgba(220,235,227,.45); }
.audio-settings { margin-top: 9px; }
.audio-file-name { margin: 0 0 8px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.audio-actions button.active { color: #fff; background: var(--teal); }
.interaction-drawer-note { margin: auto 0 0; padding-top: 16px; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* Shared editor typography: keep modal controls readable and consistent. */
.editor-submodal-body, .editor-submodal-body input, .editor-submodal-body select, .editor-submodal-body button, .editor-submodal-body label { font-family: "IBM Plex Sans Thai", sans-serif; }
.background-audio-modal .audio-file-button, .background-audio-modal .audio-modal-tab, .background-audio-modal .audio-modal-toolbar strong, .background-audio-modal .audio-modal-toolbar input, .background-audio-modal .audio-modal-toolbar select, .background-audio-modal .audio-range-row label, .background-audio-modal .audio-range-row input, .background-audio-modal .audio-range-row button, .background-audio-modal .audio-range-form-actions button, .background-audio-modal .audio-name, .background-audio-modal .audio-playback-summary { font-family: "IBM Plex Sans Thai", sans-serif; font-size: 12px; }
.background-audio-modal .audio-range-help, .background-audio-modal .audio-file-name, .background-audio-modal .audio-current-label { font-family: "IBM Plex Sans Thai", sans-serif; font-size: 12px; }
.background-audio-modal .audio-row select, .background-audio-modal .audio-page-field input { font-size: 12px; }
.library-panel { display: grid; gap: 14px; margin: 26px 0 8px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.82); box-shadow: 0 12px 30px rgba(21,40,39,.06); }
.dashboard-hero { padding-bottom: 48px; }
.dashboard-hero .intro-copy { max-width: 700px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 28px; }
.dashboard-stat-card { display: grid; gap: 4px; min-height: 92px; padding: 13px 14px; border: 1px solid rgba(18,100,95,.16); border-radius: 13px; background: rgba(255,255,255,.52); }
.dashboard-stat-card span { color: var(--muted); font-size: 10px; font-weight: 700; }
.dashboard-stat-card strong { overflow: hidden; color: var(--teal); font-family: "Noto Serif Thai", serif; font-size: 24px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stat-card small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.library-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.library-panel-head h2 { margin: 3px 0 5px; font-family: "Noto Serif Thai", serif; font-size: 25px; }
.library-panel-head p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.library-panel-actions, .library-book-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.compact-button { min-height: 34px; padding: 0 12px; font-size: 11px; }
.library-toolbar { display: grid; grid-template-columns: minmax(170px, .65fr) minmax(0, 1.35fr); gap: 9px; align-items: center; }
.library-status { padding: 10px 12px; color: var(--muted); border: 1px solid rgba(18,100,95,.14); border-radius: 8px; background: rgba(220,235,227,.3); font-size: 11px; }
.library-toolbar-controls { display: grid; grid-template-columns: minmax(160px, 1fr) 170px 160px auto; gap: 7px; }
.library-toolbar-controls input, .library-toolbar-controls select { min-height: 36px; padding: 0 10px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 7px; background: #fff; font-size: 11px; }
.library-toolbar-controls input:focus, .library-toolbar-controls select:focus { outline: 2px solid rgba(18,100,95,.22); outline-offset: 1px; }
.library-list { display: grid; gap: 14px; }
.library-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.library-book-card { display: grid; min-width: 0; overflow: hidden; border: 1px solid rgba(18,100,95,.16); border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 8px 22px rgba(21,40,39,.05); transition: transform .18s ease, box-shadow .18s ease; }
.library-book-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(21,40,39,.11); }
.library-book-cover { position: relative; display: block; width: 100%; aspect-ratio: 0.73; padding: 0; overflow: hidden; background: linear-gradient(145deg, #dcebe3, #f0d7c8); cursor: pointer; }
.library-book-cover::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.38); pointer-events: none; }
.library-book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s ease; }
.library-book-cover:hover img { transform: scale(1.025); }
.library-book-cover img.cover-missing { opacity: 0; }
.library-book-card-body { display: grid; gap: 6px; min-width: 0; padding: 14px; }
.library-book-date { margin: 0; color: var(--coral); font-size: 10px; font-weight: 700; }
.library-book-card h3 { margin: 0; overflow: hidden; color: var(--ink); font-family: "Noto Serif Thai", serif; font-size: 17px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.library-book-creator { margin: -1px 0 0; overflow: hidden; color: var(--teal); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.library-book-meta { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.library-book-viewer-status { margin: 0; overflow: hidden; color: var(--teal); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.library-book-viewer-status.viewer-copy-not_needed { color: var(--muted); }
.library-book-viewer-status.viewer-copy-processing,
.library-book-viewer-status.viewer-copy-pending { color: var(--coral); }
.library-book-actions { padding-top: 5px; }
.library-book-actions .compact-button { flex: 1 1 auto; min-height: 31px; padding: 0 8px; font-size: 10px; }
.library-table-view { grid-template-columns: 1fr; }
.library-table-view .library-book-card { grid-template-columns: 110px minmax(0, 1fr); }
.library-table-view .library-book-cover { aspect-ratio: .78; }
.library-table-view .library-book-card-body { align-content: center; }
.library-book-actions .viewer-copy-button { min-width: 0; }
.library-empty { margin: 0; padding: 18px; color: var(--muted); text-align: center; border: 1px dashed rgba(18,100,95,.2); border-radius: 9px; }
.danger-outline { color: #a33e2e; border-color: rgba(163,62,46,.32); }
.share-link-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(17,42,42,.42); }
.share-link-card { width: min(560px, 100%); max-height: calc(100dvh - 44px); overflow-y: auto; padding: 24px; border: 1px solid rgba(18,100,95,.2); border-radius: 18px; background: #fffdf8; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.family-users-card { max-height: calc(100dvh - 32px); overscroll-behavior: contain; scrollbar-gutter: stable; }
.share-link-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.share-link-head h3 { margin: 2px 0 0; font-family: "Noto Serif Thai", serif; font-size: 24px; }
.share-link-hint { margin: 14px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.share-link-input { width: 100%; min-height: 44px; padding: 0 12px; color: var(--ink); border: 1px solid rgba(18,100,95,.24); border-radius: 8px; background: #f5f1e8; font: 12px "IBM Plex Sans Thai", sans-serif; }
.share-link-input:focus { outline: 2px solid rgba(18,100,95,.24); outline-offset: 2px; }
.book-rename-label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.book-rename-label .share-link-input { margin-top: 0; }
.book-rename-card .share-link-actions { justify-content: flex-start; }
.book-rename-card button:disabled, .book-delete-card button:disabled { cursor: wait; opacity: .6; }
.book-delete-card .share-link-head h3 { color: #9d4132; }
.danger-fill { min-height: 34px; padding: 0 12px; color: #fff; background: #a94c3b; border-radius: 999px; font-size: 11px; font-weight: 700; }
.danger-fill:hover { background: #8f3c2f; }
.share-link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.share-link-status { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.replace-pdf-status { padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; line-height: 1.5; }
.replace-pdf-status.is-error { color: #a5332e; border-color: rgba(165,51,46,.28); background: rgba(233,147,114,.14); }
.replace-pdf-status.is-warning { color: #8a5a25; border-color: rgba(180,126,49,.28); background: rgba(240,198,135,.16); }
.replace-pdf-status.is-success { color: var(--teal-dark); border-color: rgba(18,100,95,.24); background: rgba(220,235,227,.52); }
.replace-pdf-status.is-working { animation: replace-status-pulse 1.15s ease-in-out infinite; }
@keyframes replace-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) { .replace-pdf-status.is-working { animation: none; } }
.reader-note { margin: 0; padding: 13px 20px; color: var(--muted); background: rgba(255,255,255,.54); border-top: 1px solid var(--line); font-size: 13px; text-align: center; }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: 320px; padding: 13px 17px; color: #fff; border-radius: 12px; background: var(--teal-dark); box-shadow: 0 15px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 850px) {
  .share-link-card { padding: 18px; }
  .book-permissions-toolbar { grid-template-columns: 1fr; }
  .book-permissions-actions .compact-button { flex: 1 1 135px; }
  .book-permission-row { align-items: flex-start; }
  .book-permission-toggle { padding-top: 2px; }
  .share-link-actions > * { flex: 1 1 130px; }
  .library-panel-head { align-items: stretch; flex-direction: column; }
  .library-panel-actions { width: 100%; }
  .library-panel-actions > * { flex: 1 1 0; }
  .library-toolbar { grid-template-columns: 1fr; }
  .library-toolbar-controls { grid-template-columns: minmax(0, 1fr) 150px auto; }
  .audio-modal-toolbar { grid-template-columns: 1fr 1fr; }
  .audio-modal-toolbar strong { grid-column: 1 / -1; }
  .background-audio-modal .audio-row { grid-template-columns: 28px minmax(120px, 1fr) 72px 72px 28px; gap: 5px; }
  .interaction-drawer { top: 64px; right: 10px; bottom: 48px; width: min(320px, calc(100% - 20px)); }

  .intro-panel { grid-template-columns: 1fr; padding-top: 52px; }
  .intro-copy { max-width: none; }
  .hero-card { max-width: 580px; width: 100%; margin: 0 auto; }
  .bottom-panel { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  body.reading-mode .workspace { width: 100%; }
  body.reading-mode .reader-stage { margin: 0; border-radius: 14px; }
  .reader-toolbar { min-height: 54px; padding: 8px 10px; gap: 6px; }
  .reader-title-wrap { gap: 7px; }
  .reader-title-wrap h2 { max-width: 42vw; font-size: 16px; }
  .reader-title-wrap .eyebrow { margin: 0; font-size: 8px; }
  .guest-reader-badge { margin-top: 3px; padding: 3px 6px; font-size: 9px; }
  .icon-button { width: 34px; height: 34px; font-size: 20px; }
  .reader-actions { gap: 3px; }
  .toolbar-button { min-width: 32px; height: 30px; padding: 0 6px; font-size: 11px; }
  .zoom-label { min-width: 34px; font-size: 10px; }
  .reader-body { height: calc(100dvh - 118px); min-height: 0; }
  .book-reader { padding: 6px 4px 8px; }
  .page-spread { margin: 4px auto 50px; }
  .reader-controls { bottom: 8px; gap: 6px; padding: 4px 6px; }
  .round-control { width: 34px; height: 34px; font-size: 26px; }
  .page-position { gap: 5px; font-size: 13px; }
  .page-position input { width: 40px; height: 29px; font-size: 13px; }
  .reader-note { padding: 7px 10px; font-size: 10px; }
  .workspace { width: calc(100% - 24px); }
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .dashboard-stat-card:last-child { grid-column: 1 / -1; }
  .library-toolbar-controls { grid-template-columns: 1fr 1fr; }
  .library-toolbar-controls input { grid-column: 1 / -1; }
  .library-toolbar-controls .compact-button { grid-column: 1 / -1; }
  .library-table-view .library-book-card { grid-template-columns: 86px minmax(0, 1fr); }
  .topbar { align-items: flex-start; gap: 18px; }
  .topbar-status { max-width: 120px; text-align: right; line-height: 1.4; }
  .workspace { width: min(100% - 32px, 540px); }
  .intro-copy h2 { font-size: 39px; }
  .hero-card { min-height: 370px; }
  .mock-book { top: 38px; width: 220px; height: 290px; }
  .front-page { padding: 28px 24px; }
  .front-page h3 { font-size: 34px; }
  .note-one { right: 0; }
  .note-two { right: -4px; bottom: 17px; }
  .quick-grid { grid-template-columns: 1fr; padding-bottom: 50px; }
  .workflow-list { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .workflow-list li:nth-child(3) { border-left: 0; }
  .workflow-list li::after { display: none; }
  .footer { gap: 10px; flex-direction: column; }
  .reader-stage { margin-top: 28px; border-radius: 20px; }
  .reader-toolbar { align-items: flex-start; flex-direction: column; padding: 16px; }
  .reader-actions { width: 100%; justify-content: flex-end; }
  .reader-body { grid-template-columns: 1fr; height: calc(100dvh - 210px); min-height: 420px; }
  .reader-sidebar { display: none; }
  .book-reader { display: flex; min-height: 0; height: 100%; padding: 18px 10px 90px; overflow: hidden; }
  .reader-scroll { width: 100%; min-height: 0; }
  .reader-stage:fullscreen .reader-body { height: 0; flex: 1 1 auto; }
  .reader-stage:fullscreen .book-reader { min-height: 0; }
  .page-spread { min-height: 0; }
  .paper-page { width: auto; min-height: 0; padding: 5px; }
  .right-paper { display: none; }
  .reader-controls { bottom: 12px; }
}


/* v43 · NAS Audio Manager modal */
.audio-library-modal .editor-submodal-card { width: min(820px, 100%); max-height: min(760px, 92%); }
.audio-library-actions { display: flex; gap: 8px; align-items: stretch; }
.audio-library-actions > * { flex: 1 1 0; }
.audio-library-status { margin: 12px 0 0; padding: 9px 11px; color: var(--muted); background: rgba(220,235,227,.32); border: 1px solid rgba(18,100,95,.14); border-radius: 8px; font-size: 11px; line-height: 1.5; }
.audio-library-status.error { color: #9a3d2f; background: rgba(220,108,108,.1); border-color: rgba(154,61,47,.25); }
.audio-library-toolbar { display: grid; grid-template-columns: auto minmax(180px, 1fr) 170px; gap: 8px; align-items: center; margin-top: 12px; padding: 9px; border: 1px solid rgba(18,100,95,.14); border-radius: 9px; background: rgba(220,235,227,.3); }
.audio-library-toolbar strong { color: var(--teal); font-size: 12px; white-space: nowrap; }
.audio-library-toolbar input, .audio-library-toolbar select { min-height: 34px; padding: 0 9px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-size: 11px; }
.audio-library-list { display: grid; gap: 8px; max-height: min(48vh, 430px); overflow-y: auto; margin-top: 12px; padding: 2px 4px 2px 0; }
.audio-library-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid rgba(18,100,95,.15); border-radius: 10px; background: rgba(255,255,255,.72); }
.audio-library-info { min-width: 0; display: grid; gap: 4px; }
.audio-library-name { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.audio-library-info small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.audio-library-row-actions { display: flex; flex: 0 0 auto; gap: 5px; align-items: center; }
.audio-library-row-actions .compact-button { min-height: 30px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
.audio-library-row-actions button:disabled { cursor: not-allowed; opacity: .46; }
.audio-preview-button { color: var(--teal); }
@media (max-width: 980px) {
  .share-link-modal { padding: 12px; align-items: start; }
  .share-link-card { max-height: calc(100dvh - 24px); padding: 18px; }
  .auth-user-bar { gap: 8px; }

  .audio-library-actions { flex-direction: column; }
  .audio-library-toolbar { grid-template-columns: 1fr 1fr; }
  .audio-library-toolbar strong { grid-column: 1 / -1; }
  .audio-library-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .audio-library-row-actions { width: 100%; }
  .audio-library-row-actions > button { flex: 1 1 0; }
}

/* v43 Audio Manager: one modal with two switchable panels */
.audio-manager-panel {
  min-height: 180px;
}

.audio-manager-panel.hidden {
  display: none;
}

.audio-panel-note {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.audio-use-button:disabled {
  opacity: .58;
  cursor: not-allowed;
}

.audio-row-nas {
  border-color: rgba(18, 100, 95, .34);
  background: rgba(220, 235, 227, .42);
}

.audio-row-nas .audio-name::after {
  content: " NAS";
  display: inline-block;
  margin-left: 7px;
  color: var(--teal);
  font-size: .72em;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .background-audio-modal .audio-row { grid-template-columns: 30px minmax(120px,1fr) 72px 72px; }
  .background-audio-modal .audio-row .audio-playback-summary { grid-column: 2 / -1; }
  .background-audio-modal .audio-row .audio-options-button { grid-column: 1; grid-row: 2; }
  .audio-library-row-actions {
    flex-wrap: wrap;
  }

  .audio-library-row-actions button {
    flex: 1 1 42%;
  }
}


/* v52 Guest Viewer / Guest Share Manager */
.guest-user-bar { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; font-size: 12px; }
.guest-reader-badge { display: inline-flex; margin-top: 6px; padding: 4px 10px; border: 1px solid rgba(18,108,101,.25); border-radius: 999px; color: var(--teal); background: rgba(224,241,232,.78); font-size: 12px; font-weight: 600; }
.guest-error-panel { min-height: 56vh; display: grid; place-items: center; padding: 64px 24px; }
.guest-error-card { width: min(620px, 100%); padding: 42px; border: 1px solid rgba(18,52,50,.14); border-radius: 28px; background: rgba(255,253,247,.92); box-shadow: var(--shadow); text-align: center; }
.guest-error-card h2 { margin: 8px 0 12px; font-family: "Noto Serif Thai", serif; color: var(--ink); }
.guest-error-card p:last-child { margin: 0; color: var(--muted); }
.guest-share-card { max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }
.guest-share-label { display: grid; gap: 7px; margin-top: 14px; color: #38504c; font-weight: 600; }
.guest-share-list { display: grid; gap: 10px; margin-top: 18px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.guest-share-item { padding: 14px 16px; border: 1px solid rgba(18,52,50,.14); border-radius: 16px; background: rgba(250,252,246,.84); }
.guest-share-item-head, .guest-share-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guest-share-item-head strong { color: #173c38; }
.guest-share-item p { margin: 7px 0 10px; color: #65736f; font-size: .86rem; }
.guest-share-status { padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.guest-share-status.active { color: #126c65; background: #dff2e7; }
.guest-share-status.inactive { color: #8b4c3e; background: #f5e2da; }
.guest-share-item-actions { justify-content: flex-start; flex-wrap: wrap; }
.guest-share-empty { margin: 8px 0; color: #697773; text-align: center; }
@media (max-width: 720px) { .guest-user-bar { font-size: .82rem; } .guest-error-card { padding: 28px 22px; } .guest-share-card { max-height: calc(100vh - 20px); } .guest-share-item-head { align-items: flex-start; flex-direction: column; } }

.guest-share-url-field { width: 100%; margin: 2px 0 10px; font-size: 12px; }
.guest-share-custom-days { margin-top: 10px; }
.guest-share-filter-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(18,52,50,.12); }
.guest-share-filter-label { color: #38504c; font-weight: 600; white-space: nowrap; }
.guest-share-filter { flex: 1; min-width: 0; }


/* v52.7 · Minimal Fullscreen Reader */
.reader-stage.reader-minimal-fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--reader-background, #f0eadf);
}
.reader-stage.reader-minimal-fullscreen .reader-toolbar {
  position: relative;
  z-index: 15;
  flex: 0 0 auto;
  min-height: 0;
  padding: 5px 9px;
  gap: 8px;
  background: rgba(255,255,255,.72);
}
.reader-stage.reader-minimal-fullscreen .reader-title-wrap {
  flex: 0 0 auto;
  gap: 0;
}
.reader-stage.reader-minimal-fullscreen .reader-title-wrap > div,
.reader-stage.reader-minimal-fullscreen .zoom-controls,
.reader-stage.reader-minimal-fullscreen #overlayEditButton {
  display: none !important;
}
.reader-stage.reader-minimal-fullscreen .reader-actions {
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
}
.reader-stage.reader-minimal-fullscreen #fullscreenButton {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}
.reader-stage.reader-minimal-fullscreen .reader-body {
  grid-template-columns: minmax(0, 1fr) !important;
  height: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.reader-stage.reader-minimal-fullscreen .reader-sidebar,
.reader-stage.reader-minimal-fullscreen .sidebar-resizer {
  display: none !important;
}
.reader-stage.reader-minimal-fullscreen .book-reader {
  grid-column: 1 / -1;
  min-height: 0;
  height: 100%;
  padding: 0 0 5px;
}
.reader-stage.reader-minimal-fullscreen .reader-scroll {
  scrollbar-width: none;
}
.reader-stage.reader-minimal-fullscreen .reader-scroll::-webkit-scrollbar {
  display: none;
}
.reader-stage.reader-minimal-fullscreen .page-spread {
  margin: 3px auto 52px;
}
.reader-stage.reader-minimal-fullscreen .reader-controls {
  bottom: 6px;
  gap: 8px;
  padding: 4px 6px;
  opacity: .9;
}
.reader-stage.reader-minimal-fullscreen .reader-note {
  display: none !important;
}

@media (max-width: 620px) {
  .reader-stage.reader-minimal-fullscreen .reader-toolbar {
    flex-direction: row;
    align-items: center;
    padding: 4px 7px;
  }
  .reader-stage.reader-minimal-fullscreen .reader-title-wrap,
  .reader-stage.reader-minimal-fullscreen .reader-actions {
    width: auto;
  }
  .reader-stage.reader-minimal-fullscreen .icon-button {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }
  .reader-stage.reader-minimal-fullscreen #fullscreenButton {
    height: 32px;
    padding: 0 9px;
    font-size: 11px;
  }
  .reader-stage.reader-minimal-fullscreen .book-reader {
    padding: 0 0 2px;
  }
  .reader-stage.reader-minimal-fullscreen .page-spread {
    margin: 1px auto 47px;
  }
  .reader-stage.reader-minimal-fullscreen .reader-controls {
    bottom: 4px;
    gap: 4px;
    padding: 3px 5px;
  }
  .reader-stage.reader-minimal-fullscreen .round-control {
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
  .reader-stage.reader-minimal-fullscreen .page-position {
    gap: 4px;
    font-size: 12px;
  }
  .reader-stage.reader-minimal-fullscreen .page-position input {
    width: 37px;
    height: 27px;
    font-size: 12px;
  }
}


/* Replace PDF v54.x */
.editor-setting-form { display: grid; gap: 9px; }
.editor-setting-card input[type="file"] { min-height: 38px; padding: 7px; }
.replace-pdf-versions { display: grid; gap: 7px; margin-top: 4px; }
.replace-pdf-versions h4 { margin: 0; color: var(--ink); font-size: 13px; }
.replace-pdf-version-list { display: grid; gap: 7px; max-height: min(28dvh, 220px); overflow-y: auto; padding: 2px; }
.replace-pdf-version-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid rgba(18,100,95,.15); border-radius: 9px; background: rgba(255,255,255,.58); }
.replace-pdf-version-card > div { display: grid; gap: 3px; min-width: 0; }
.replace-pdf-version-card strong { color: var(--ink); font-size: 12px; }
.replace-pdf-version-card small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) {
  .replace-pdf-version-card { align-items: stretch; flex-direction: column; }
  .replace-pdf-version-card .compact-button { width: 100%; }
}

.replace-pdf-shift-panel { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(18,100,95,.18); border-radius: 10px; background: rgba(220,235,227,.24); }
.replace-pdf-shift-guide { display: grid; gap: 4px; padding: 11px 12px; color: var(--ink); border: 1px solid rgba(18,100,95,.2); border-radius: 9px; background: rgba(255,255,255,.7); font-size: 12px; line-height: 1.55; }
.replace-pdf-shift-guide strong { color: var(--teal); font-size: 13px; }
.replace-pdf-shift-guide span { color: var(--muted); }
.replace-pdf-shift-guide small { color: #76522c; font-size: 11px; line-height: 1.55; }
.replace-pdf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.replace-pdf-section-head h4, .replace-pdf-review h4 { margin: 0; color: var(--teal); font-size: 13px; }
.replace-pdf-changes, .replace-pdf-review { display: grid; gap: 8px; }
.replace-pdf-change-row { display: grid; grid-template-columns: minmax(92px, 1fr) minmax(118px, 1fr) minmax(92px, 1fr) auto; gap: 7px; align-items: end; padding: 9px; border: 1px solid rgba(18,100,95,.16); border-radius: 8px; background: rgba(255,255,255,.72); }
.replace-pdf-change-field { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.25; }
.replace-pdf-change-row select, .replace-pdf-change-row input, .replace-pdf-review-fields input { width: 100%; min-height: 34px; padding: 0 7px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-size: 11px; }
.replace-pdf-change-row .danger-outline { color: #a33e2e; border-color: rgba(163,62,46,.28); }
.replace-pdf-change-summary { padding: 9px 10px; color: var(--teal); border: 1px solid rgba(18,100,95,.18); border-radius: 8px; background: rgba(220,235,227,.42); font-size: 11px; font-weight: 700; line-height: 1.45; }
.replace-pdf-change-summary.is-danger { color: #a33e2e; border-color: rgba(163,62,46,.35); background: rgba(233,147,114,.12); }
.replace-pdf-review { padding: 12px; border: 1px solid rgba(18,100,95,.22); border-radius: 10px; background: rgba(255,255,255,.58); }
.replace-pdf-confirm-button { width: 100%; margin-top: 2px; }
.replace-pdf-confirm-button:disabled { cursor: wait; opacity: .62; }
.replace-pdf-review-card { display: grid; gap: 4px; padding: 9px; border: 1px solid rgba(233,147,114,.4); border-radius: 8px; background: rgba(233,147,114,.1); }
.replace-pdf-review-card strong { color: var(--ink); font-size: 12px; }
.replace-pdf-review-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.replace-pdf-review-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 3px; }
.replace-pdf-review-card[data-review-kind="toc"] .replace-pdf-review-fields, .replace-pdf-review-card[data-review-kind="overlay"] .replace-pdf-review-fields { grid-template-columns: minmax(0, 120px); }
@media (max-width: 620px) {
  .replace-pdf-change-row { grid-template-columns: 1fr 1fr; }
  .replace-pdf-change-row select { grid-column: 1 / -1; }
  .replace-pdf-change-row .danger-outline { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 520px) {
  .replace-pdf-change-row { grid-template-columns: 1fr; }
  .replace-pdf-change-row select, .replace-pdf-change-row .danger-outline { grid-column: auto; }
}


/* INTERACTIONS · IMAGE */
.image-overlay { position: absolute; z-index: 3; display: grid; place-items: stretch; overflow: hidden; border: 1px solid transparent; border-radius: 5px; pointer-events: auto; touch-action: none; }
.image-overlay img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.image-overlay.selected, .reader-overlay-editing .image-overlay.selected { border: 2px dashed var(--coral); box-shadow: 0 0 0 2px rgba(233,147,114,.18); cursor: move; }
.reader-overlay-editing .image-overlay { border: 1px dashed rgba(233,147,114,.5); cursor: move; }
.image-resize-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; border-right: 3px solid var(--coral); border-bottom: 3px solid var(--coral); }
.video-overlay { position: absolute; z-index: 4; display: grid; place-items: stretch; overflow: hidden; border: 1px solid transparent; border-radius: 8px; background: #12201f; pointer-events: auto; touch-action: none; }
.video-overlay video { display: block; width: 100%; height: 100%; object-fit: contain; background: #12201f; }
.reader-video-editing .overlay-layer { pointer-events: auto; }
.reader-video-editing .video-overlay { border: 1px dashed rgba(18,100,95,.65); cursor: move; user-select: none; }
.reader-video-editing .video-overlay video { pointer-events: none; }
.reader-video-editing .video-overlay.selected { border: 2px dashed var(--coral); box-shadow: 0 0 0 2px rgba(233,147,114,.18); }
.video-resize-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; border-right: 3px solid var(--coral); border-bottom: 3px solid var(--coral); }
.image-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.image-form-grid label, .image-card-fields label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.image-form-grid input, .image-form-grid select, .image-card-fields input, .image-card-fields select { width: 100%; min-height: 34px; padding: 0 8px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-family: inherit; font-size: 11px; }
.image-card-fields label > input, .image-card-fields label > select { min-width: 0; }
.image-list { display: grid; gap: 8px; }
.image-list h4 { margin: 3px 0 0; color: var(--teal); font-size: 13px; }
.image-card { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(18,100,95,.16); border-radius: 9px; background: rgba(255,255,255,.64); }
.image-card strong { color: var(--ink); font-size: 12px; }
.image-card small { color: var(--muted); font-size: 10px; }
.image-card-fields { display: grid; grid-template-columns: .7fr 1.3fr .7fr .9fr; gap: 6px; }
.image-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.image-card-actions > * { flex: 1 1 120px; }
.video-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.video-form-grid label:not(.checkbox-row), .video-card-fields label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.video-form-grid input[type="text"], .video-form-grid input[type="number"], .video-form-grid select, .video-card-fields input, .video-card-fields select { width: 100%; min-height: 34px; padding: 0 8px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-family: inherit; font-size: 11px; }
.video-form-grid .checkbox-row { min-height: 34px; padding: 8px; }
.video-form-grid .checkbox-row input, .video-card-fields .checkbox-row input { width: auto; min-height: 0; }
.video-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.video-option-card { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 10px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 8px; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; text-align: center; }
.video-option-card input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--teal); }
.video-option-card span { line-height: 1.25; }
.video-list { display: grid; gap: 8px; }
.video-list h4 { margin: 3px 0 0; color: var(--teal); font-size: 13px; }
.video-card { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(18,100,95,.16); border-radius: 9px; background: rgba(255,255,255,.64); }
.video-card strong { color: var(--ink); font-size: 12px; }
.video-card small { color: var(--muted); font-size: 10px; }
.video-card-fields { display: grid; grid-template-columns: .7fr 1.3fr .9fr repeat(3, .8fr); gap: 6px; }
.video-card-fields label > input, .video-card-fields label > select { min-width: 0; }
.video-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.video-card-actions > * { flex: 1 1 120px; }
@media (max-width: 900px) {
  .image-edit-toolbar.with-editor-drawer { top: 8px; right: 8px; left: 8px; width: auto; transform: none; z-index: 30; }
}
@media (max-width: 620px) {
  .image-form-grid, .video-form-grid { grid-template-columns: 1fr; }
  .video-options-grid { grid-template-columns: 1fr; }
  .image-card-fields { grid-template-columns: 1fr 1fr; }
  .video-card-fields { grid-template-columns: 1fr 1fr; }
  .image-card-actions > *, .video-card-actions > * { flex-basis: 100%; }
  .image-edit-toolbar { align-items: stretch; flex-direction: column; gap: 8px; top: 8px; width: min(420px, calc(100% - 16px)); padding: 9px; }
  .image-edit-toolbar-actions { width: 100%; }
  .image-edit-toolbar-actions button { flex: 1 1 0; }
  .image-edit-toolbar-copy span { white-space: normal; }
}

/* v55.11 Audio Overlay */
.audio-edit-toolbar { border-color: rgba(18,100,95,.36); }
.reader-audio-editing .overlay-layer { pointer-events: auto; }
.audio-overlay { position: absolute; display: flex; align-items: center; min-width: 0; min-height: 28px; padding: 3px; border: 1px solid rgba(18,100,95,.18); border-radius: 8px; background: rgba(255,253,248,.9); box-shadow: 0 6px 18px rgba(21,40,39,.12); pointer-events: auto; }
.audio-overlay audio { display: block; width: 100%; height: 100%; min-height: 28px; }
.audio-overlay:hover { border-color: rgba(18,100,95,.42); }
.reader-audio-editing .audio-overlay { border: 2px dashed var(--coral); background: rgba(233,147,114,.14); cursor: move; }
.reader-audio-editing .audio-overlay.selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(18,100,95,.18); }
.reader-audio-editing .audio-overlay audio { opacity: .18; pointer-events: none; }
.audio-overlay-edit-label { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 0 22px 0 8px; color: var(--teal-dark); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.audio-resize-handle { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); cursor: nwse-resize; }
.audio-overlay-library-toolbar { display: grid; grid-template-columns: auto auto minmax(160px, 1fr); gap: 8px; align-items: center; padding: 9px; border: 1px solid rgba(18,100,95,.14); border-radius: 9px; background: rgba(220,235,227,.3); }
.audio-overlay-library-toolbar > span { color: var(--teal); font-size: 11px; font-weight: 700; }
.audio-overlay-library-toolbar input { min-height: 34px; padding: 0 9px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-size: 11px; }
.audio-overlay-library-list { display: grid; gap: 7px; max-height: min(31vh, 260px); overflow-y: auto; margin-top: 9px; padding-right: 3px; }
.audio-overlay-library-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid rgba(18,100,95,.15); border-radius: 8px; background: rgba(255,255,255,.72); }
.audio-overlay-library-info { display: grid; gap: 2px; min-width: 0; }
.audio-overlay-library-info strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.audio-overlay-library-info small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.audio-overlay-library-row button.active { color: #fff; background: var(--teal); }
.audio-overlay-selected { display: grid; gap: 9px; margin-top: 10px; padding: 11px; border: 1px solid rgba(18,100,95,.24); border-radius: 9px; background: rgba(220,235,227,.38); }
.audio-overlay-selected-actions, .audio-overlay-card-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.audio-form-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(100px, .5fr); gap: 8px; }
.audio-form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.audio-form-grid input { min-height: 34px; padding: 0 8px; color: var(--ink); border: 1px solid rgba(18,100,95,.22); border-radius: 6px; background: #fff; font-size: 11px; }
.audio-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.audio-option-card { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 8px; color: var(--teal); border: 1px solid rgba(18,100,95,.16); border-radius: 7px; background: rgba(255,255,255,.7); font-size: 10px; font-weight: 700; }
.audio-option-card input { accent-color: var(--teal); }
.audio-overlay-list { display: grid; gap: 7px; margin-top: 12px; }
.audio-overlay-list h4 { margin: 0; color: var(--teal); font-size: 12px; }
.audio-overlay-card { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(18,100,95,.15); border-radius: 8px; background: rgba(255,255,255,.7); }
.audio-overlay-card strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.audio-overlay-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
@media (max-width: 620px) {
  .audio-overlay-library-toolbar { grid-template-columns: 1fr 1fr; }
  .audio-overlay-library-toolbar input { grid-column: 1 / -1; }
  .audio-form-grid { grid-template-columns: 1fr; }
  .audio-options-grid { grid-template-columns: 1fr; }
  .audio-overlay-library-row { align-items: flex-start; flex-direction: column; }
  .audio-overlay-library-row button { width: 100%; }
}

/* v55.13 double-click shortcuts */
.video-overlay-shortcut, .audio-overlay-shortcut { cursor: pointer; }
.video-overlay-shortcut::after, .audio-overlay-shortcut::after { position: absolute; right: 6px; top: 6px; z-index: 2; padding: 2px 5px; color: rgba(255,255,255,.9); border-radius: 5px; background: rgba(18,100,95,.72); content: "ดับเบิ้ลคลิก"; font-size: 9px; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.video-overlay-shortcut:hover::after, .audio-overlay-shortcut:hover::after { opacity: 1; }
.reader-video-editing .video-overlay::after, .reader-audio-editing .audio-overlay::after { display: none; }
@media (prefers-reduced-motion: reduce) { .video-overlay-shortcut::after, .audio-overlay-shortcut::after { transition: none; } }


/* v55.13 · QR Code Interaction */
.qr-edit-toolbar {
  border-color: rgba(28, 121, 112, .42);
}

.qr-code-overlay {
  position: absolute;
  z-index: 7;
  box-sizing: border-box;
  padding: 0;
  background: #fff;
  border: 2px dashed rgba(21, 99, 93, .72);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(17, 42, 42, .16);
  overflow: visible;
  touch-action: none;
}

.qr-code-overlay.qr-code-overlay-shortcut {
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.qr-code-overlay.selected,
.reader-qr-editing .qr-code-overlay:hover {
  border-color: #e19a6b;
  box-shadow: 0 0 0 3px rgba(225, 154, 107, .22);
}

.qr-code-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: #fff;
}

.qr-code-link svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  shape-rendering: crispEdges;
}

.qr-code-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #112a2a;
  background: #fff;
  font-size: clamp(10px, 1.5vw, 16px);
  font-weight: 700;
}

.qr-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #16766d;
  box-shadow: 0 2px 7px rgba(17, 42, 42, .28);
  cursor: nwse-resize;
  touch-action: none;
}

.qr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qr-code-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.qr-code-list-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(17, 42, 42, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.qr-code-list-item strong {
  color: #112a2a;
}

.qr-code-list-item small {
  overflow-wrap: anywhere;
  color: #5f716d;
  line-height: 1.45;
}

.qr-code-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-overlay-actions .confirm-editor-button {
  margin-top: 0;
  flex: 1 1 100%;
}

@media (max-width: 680px) {
  .qr-form-grid {
    grid-template-columns: 1fr;
  }

  .qr-code-overlay {
    border-radius: 7px;
  }

  .qr-resize-handle {
    width: 18px;
    height: 18px;
  }
}


/* v55.15 · Link grouping and compact editor drawer */
.interaction-drawer {
  min-width: 0;
  max-width: calc(100% - 32px);
  overflow-x: hidden;
}

.interaction-drawer .editor-category-body,
.interaction-drawer .editor-subtool,
.interaction-drawer .interaction-tool,
.interaction-drawer .link-tool-group,
.interaction-drawer .selected-overlay-panel {
  min-width: 0;
  max-width: 100%;
}

.interaction-drawer .editor-subtool,
.interaction-drawer .interaction-tool {
  overflow: hidden;
}

.interaction-drawer .editor-subtool span,
.interaction-drawer .editor-subtool small,
.interaction-drawer .interaction-tool > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-tool-group {
  overflow: hidden;
  border: 1px solid rgba(18, 100, 95, .18);
  border-radius: 9px;
  background: rgba(220, 235, 227, .35);
}

.link-tool-group .interaction-tool {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.link-tool-group .interaction-tool.active,
.link-tool-group .interaction-tool:hover {
  border-color: transparent;
  background: rgba(220, 235, 227, .7);
}

.link-tool-group .selected-overlay-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(233, 147, 114, .34);
  border-radius: 0;
  background: rgba(233, 147, 114, .11);
}

.link-tool-group .selected-overlay-url {
  max-width: 100%;
}

.interaction-drawer .selected-overlay-actions {
  min-width: 0;
}

.interaction-drawer .selected-overlay-actions button {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 680px) {
  .interaction-drawer {
    right: 8px;
    width: min(320px, calc(100% - 16px));
    max-width: calc(100% - 16px);
  }
}


/* v55.17 · generic drag-first placement gesture */
.reader-overlay-editing .overlay-layer,
.reader-image-editing .overlay-layer,
.reader-video-editing .overlay-layer,
.reader-audio-editing .overlay-layer {
  pointer-events: auto;
}

.placement-preview {
  position: absolute;
  z-index: 35;
  box-sizing: border-box;
  border: 2px dashed #e19a6b;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, rgba(225, 154, 107, .18) 0 8px, rgba(255, 255, 255, .22) 8px 16px);
  box-shadow: 0 0 0 3px rgba(225, 154, 107, .16);
  pointer-events: none;
}

.reader-overlay-editing .link-tool,
.reader-overlay-editing #addLinkTool,
.reader-image-editing .image-tool,
.reader-video-editing .video-tool,
.reader-audio-editing .audio-overlay-tool {
  cursor: crosshair;
}

/* v55.17 · QR placement gesture */
.reader-qr-editing .overlay-layer {
  pointer-events: auto;
}

.qr-placement-preview {
  position: absolute;
  z-index: 20;
  box-sizing: border-box;
  border: 2px dashed var(--teal);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, rgba(18, 100, 95, .16) 0 8px, rgba(255, 255, 255, .2) 8px 16px);
  box-shadow: 0 0 0 3px rgba(18, 100, 95, .14);
  pointer-events: none;
}

.reader-qr-editing .qr-code-tool,
.reader-qr-editing #qrCodeTool {
  cursor: crosshair;
}


/* v55.15 · QR URL overflow protection */
.editor-submodal,
.editor-submodal-card,
.editor-submodal-body,
.editor-submodal-body > *,
.editor-setting-form,
.editor-setting-card,
.qr-code-list,
.qr-code-list-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.editor-submodal-card {
  overflow-x: hidden;
}

.qr-code-list-item strong,
.qr-code-list-item small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.qr-code-list-item strong {
  line-height: 1.4;
}

.qr-code-list-item small {
  max-height: 4.35em;
  overflow: hidden;
}

.qr-code-list-actions {
  min-width: 0;
  max-width: 100%;
}

.qr-code-list-actions .compact-button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.qr-form-grid > *,
.editor-setting-card input,
.editor-setting-card select {
  min-width: 0;
  max-width: 100%;
}


/* v55.20 · Full-screen Fit-to-Height controls */
.reader-stage.reader-minimal-fullscreen .reader-toolbar {
  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  left: 0;
  min-height: 0;
  padding: 8px 12px;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255,253,248,.94), rgba(255,253,248,.72), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .2s ease, transform .2s ease;
}
.reader-stage.reader-minimal-fullscreen .reader-controls {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
}
.reader-stage.reader-minimal-fullscreen .image-edit-toolbar,
.reader-stage.reader-minimal-fullscreen .interaction-drawer,
.reader-stage.reader-minimal-fullscreen .overlay-editor {
  opacity: 0;
  pointer-events: none;
}
.reader-stage.reader-minimal-fullscreen.reader-fullscreen-controls-visible .reader-toolbar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.reader-stage.reader-minimal-fullscreen.reader-fullscreen-controls-visible .reader-controls {
  opacity: .96;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .reader-stage.reader-minimal-fullscreen .reader-toolbar,
  .reader-stage.reader-minimal-fullscreen .reader-controls {
    transition: none;
  }
}


/* v55.20 · Visual Polish 1 · subtle Home/Dashboard refinements */
:where(button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(233, 147, 114, .52);
  outline-offset: 2px;
}
.library-panel {
  border-color: rgba(18, 100, 95, .18);
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 16px 36px rgba(21, 40, 39, .07);
}
.dashboard-stat-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dashboard-stat-card:hover {
  border-color: rgba(18, 100, 95, .32);
  box-shadow: 0 8px 20px rgba(21, 40, 39, .08);
  transform: translateY(-2px);
}
.library-book-card {
  border-color: rgba(18, 100, 95, .19);
  box-shadow: 0 10px 24px rgba(21, 40, 39, .06);
}
.library-book-card:focus-within {
  border-color: rgba(18, 100, 95, .5);
  box-shadow: 0 0 0 3px rgba(233, 147, 114, .18), 0 12px 26px rgba(21, 40, 39, .08);
}
.library-book-actions .compact-button {
  min-height: 34px;
}
.library-status,
.library-empty {
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-stat-card,
  .library-book-card {
    transition: none;
  }
}


/* v55.20 · Full-screen Fit-to-Height: no reserved top/bottom space */
.reader-stage.reader-minimal-fullscreen .book-reader {
  padding: 0;
}
.reader-stage.reader-minimal-fullscreen .reader-scroll {
  width: 100%;
  height: 100%;
}
.reader-stage.reader-minimal-fullscreen .page-spread,
.reader-stage.reader-minimal-fullscreen .paper-page {
  margin-top: 0;
  margin-bottom: 0;
}
.reader-stage.reader-minimal-fullscreen .paper-page {
  padding: 0;
}
.reader-stage.reader-minimal-fullscreen .overlay-layer {
  top: 0;
  left: 0;
}


/* v55.23 · Mobile Guest Full-screen: height-first fit without changing Desktop */
@media (max-width: 620px) {
  .reader-stage.reader-mobile-guest-fullscreen {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .reader-stage.reader-mobile-guest-fullscreen .reader-body,
  .reader-stage.reader-mobile-guest-fullscreen .book-reader,
  .reader-stage.reader-mobile-guest-fullscreen .reader-scroll {
    min-height: 0;
    max-height: 100%;
  }
  .reader-stage.reader-mobile-guest-fullscreen .reader-body {
    height: 0;
    flex: 1 1 auto;
  }
  .reader-stage.reader-mobile-guest-fullscreen .book-reader,
  .reader-stage.reader-mobile-guest-fullscreen .reader-scroll {
    height: 100%;
    padding: 0;
  }
  .reader-stage.reader-mobile-guest-fullscreen .page-spread {
    margin: 0;
  }
  .reader-stage.reader-mobile-guest-fullscreen .reader-controls {
    bottom: max(4px, env(safe-area-inset-bottom));
  }
}


/* v55.25 · Reading Room Header + top action group polish; visual-only */
.reader-stage:not(.reader-minimal-fullscreen) .reader-toolbar {
  gap: 16px;
  padding: 14px 18px;
  border-bottom-color: rgba(18, 100, 95, .14);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,253,248,.7));
}
.reader-stage:not(.reader-minimal-fullscreen) .reader-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}
.reader-stage:not(.reader-minimal-fullscreen) .reader-title-wrap > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.reader-stage:not(.reader-minimal-fullscreen) .reader-title-wrap h2 {
  max-width: min(520px, 42vw);
  line-height: 1.18;
}
.reader-stage:not(.reader-minimal-fullscreen) .reader-actions {
  flex: 0 0 auto;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(18,100,95,.13);
  border-radius: 16px;
  background: rgba(246,242,233,.72);
  box-shadow: 0 5px 14px rgba(21,40,39,.06);
}
.reader-stage:not(.reader-minimal-fullscreen) .zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border: 1px solid rgba(18,100,95,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
}
.reader-stage:not(.reader-minimal-fullscreen) .toolbar-button {
  height: 36px;
  padding: 0 12px;
  border-color: rgba(18,100,95,.2);
  background: rgba(255,255,255,.78);
  box-shadow: 0 2px 5px rgba(21,40,39,.04);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.reader-stage:not(.reader-minimal-fullscreen) .toolbar-button:hover,
.reader-stage:not(.reader-minimal-fullscreen) .toolbar-button:focus-visible {
  border-color: rgba(18,100,95,.42);
  background: #fff;
  box-shadow: 0 4px 9px rgba(21,40,39,.08);
  transform: translateY(-1px);
}
.reader-stage:not(.reader-minimal-fullscreen) #fullscreenButton {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}
.reader-stage:not(.reader-minimal-fullscreen) #fullscreenButton:hover,
.reader-stage:not(.reader-minimal-fullscreen) #fullscreenButton:focus-visible {
  color: #fff;
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}
.reader-stage:not(.reader-minimal-fullscreen) #downloadPdfButton {
  color: var(--teal-dark);
  background: var(--mint);
  border-color: rgba(18,100,95,.22);
}
.reader-stage:not(.reader-minimal-fullscreen) .guest-reader-badge {
  width: fit-content;
  max-width: 100%;
  border-color: rgba(18,100,95,.22);
  background: rgba(220,235,227,.72);
}
@media (max-width: 620px) {
  .reader-stage:not(.reader-minimal-fullscreen) .reader-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px 12px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .reader-title-wrap {
    width: 100%;
    gap: 8px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .reader-title-wrap h2 {
    max-width: calc(100vw - 74px);
    font-size: 17px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .reader-actions {
    width: 100%;
    justify-content: center;
    gap: 4px;
    padding: 3px;
    border-radius: 14px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .zoom-controls {
    gap: 2px;
    padding: 1px 3px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .toolbar-button {
    min-width: 34px;
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .zoom-label {
    min-width: 38px;
    font-size: 11px;
  }
  .reader-stage:not(.reader-minimal-fullscreen) .guest-reader-badge {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reader-stage:not(.reader-minimal-fullscreen) .toolbar-button {
    transition: none;
  }
}


/* v55.26 · Editor Panel + Modal UX polish; CSS-only, preserve all logic hooks */
.interaction-drawer {
  padding: 0 16px 16px;
  border-color: rgba(18,100,95,.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,253,248,.99), rgba(246,242,233,.97));
  box-shadow: 0 22px 52px rgba(21,40,39,.24);
  scrollbar-gutter: stable;
}
.interaction-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -16px 0;
  padding: 16px 16px 13px;
  border-bottom-color: rgba(18,100,95,.16);
  background: linear-gradient(180deg, rgba(255,253,248,.99), rgba(255,253,248,.92));
  backdrop-filter: blur(10px);
}
.interaction-drawer-head h3,
.editor-submodal-head h3,
.share-link-head h3 {
  letter-spacing: -.025em;
}
.interaction-drawer .editor-category > summary {
  margin: 0 -4px;
  padding: 13px 6px;
  border-radius: 10px;
  transition: color .18s ease, background .18s ease;
}
.interaction-drawer .editor-category > summary:hover,
.interaction-drawer .editor-category > summary:focus-visible {
  background: rgba(220,235,227,.5);
}
.interaction-drawer .editor-category-body {
  gap: 8px;
  padding: 2px 0 15px;
}
.interaction-drawer .editor-subtool,
.interaction-drawer .interaction-tool {
  min-height: 44px;
  padding: 9px 11px;
  border-color: rgba(18,100,95,.16);
  border-radius: 11px;
  background: rgba(255,255,255,.7);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.interaction-drawer .editor-subtool:hover,
.interaction-drawer .editor-subtool:focus-visible,
.interaction-drawer .interaction-tool:hover,
.interaction-drawer .interaction-tool:focus-visible,
.interaction-drawer .interaction-tool.active {
  border-color: rgba(18,100,95,.35);
  background: rgba(220,235,227,.62);
  box-shadow: 0 4px 10px rgba(21,40,39,.06);
  transform: translateY(-1px);
}
.interaction-drawer .editor-subtool span {
  font-weight: 700;
}
.interaction-drawer .editor-subtool small,
.interaction-drawer .interaction-tool small {
  line-height: 1.35;
}
.interaction-drawer .interaction-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 3px 3px 0 rgba(185,213,201,.7);
}
.interaction-drawer .selected-overlay-panel {
  margin-top: 11px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(233,147,114,.12), rgba(255,253,248,.8));
}
.interaction-drawer-note {
  margin: 16px 0 0;
  padding: 13px 2px 0;
  border-top: 1px dashed rgba(18,100,95,.2);
}
.drawer-close {
  border: 1px solid rgba(18,100,95,.12);
  box-shadow: 0 2px 6px rgba(21,40,39,.06);
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.drawer-close:hover,
.drawer-close:focus-visible {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 5px 12px rgba(18,100,95,.2);
  transform: rotate(3deg) scale(1.04);
}
.editor-submodal,
.share-link-modal {
  padding: clamp(12px, 3vw, 24px);
  background: rgba(17,42,42,.48);
  backdrop-filter: blur(5px);
}
.editor-submodal-card,
.share-link-card {
  border-color: rgba(18,100,95,.18);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf8, #f6f2e9);
  box-shadow: 0 28px 80px rgba(21,40,39,.3);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.editor-submodal-card {
  padding: 0 22px 22px;
}
.editor-submodal-head,
.share-link-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -22px;
  padding: 20px 22px 14px;
  border-bottom-color: rgba(18,100,95,.15);
  background: linear-gradient(180deg, rgba(255,253,248,.99), rgba(255,253,248,.93));
  backdrop-filter: blur(10px);
}
.share-link-card {
  padding: 0 24px 24px;
}
.share-link-card .share-link-head {
  margin: 0 -24px;
  padding: 22px 24px 15px;
}
.editor-submodal-hint,
.share-link-hint {
  max-width: 70ch;
  padding: 10px 12px;
  border-left: 3px solid rgba(18,100,95,.35);
  border-radius: 0 9px 9px 0;
  background: rgba(220,235,227,.36);
}
.editor-submodal-body,
.share-link-card > form,
.share-link-card > label {
  min-width: 0;
}
.editor-submodal-body > label,
.editor-setting-card label,
.book-rename-label,
.guest-share-label {
  line-height: 1.35;
}
.editor-submodal-body input,
.editor-submodal-body select,
.editor-submodal-body textarea,
.share-link-card input,
.share-link-card select,
.share-link-card textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.editor-submodal-body input:focus,
.editor-submodal-body select:focus,
.editor-submodal-body textarea:focus,
.share-link-card input:focus,
.share-link-card select:focus,
.share-link-card textarea:focus {
  border-color: rgba(18,100,95,.5);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18,100,95,.1);
  outline: none;
}
.editor-setting-card,
.editor-toggle-card,
.editor-setting-note,
.audio-range-form,
.audio-modal-toolbar,
.audio-library-toolbar {
  border-radius: 12px;
}
.editor-setting-card,
.editor-toggle-card {
  background: rgba(255,255,255,.72);
}
.editor-submodal-done,
.audio-conflict-actions,
.share-link-actions {
  margin-top: 18px;
}
.editor-submodal-done,
.share-link-actions .primary-button,
.share-link-actions .secondary-button,
.audio-conflict-actions button {
  min-height: 38px;
}
.audio-modal-tabs {
  position: sticky;
  top: 73px;
  z-index: 1;
  padding-top: 3px;
  background: rgba(255,253,248,.94);
}
.audio-modal-tab {
  border-radius: 9px 9px 0 0;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.audio-modal-tab:hover,
.audio-modal-tab:focus-visible {
  background: rgba(220,235,227,.42);
}
.image-edit-toolbar {
  border-color: rgba(18,100,95,.24);
  border-radius: 15px;
  box-shadow: 0 14px 32px rgba(21,40,39,.16);
}
.overlay-editor-card {
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(21,40,39,.3);
}
@media (max-width: 620px) {
  .interaction-drawer {
    right: 10px;
    width: min(340px, calc(100% - 20px));
    padding: 0 12px 12px;
    border-radius: 18px;
  }
  .interaction-drawer-head {
    margin: 0 -12px;
    padding: 14px 12px 11px;
  }
  .interaction-drawer .editor-subtool,
  .interaction-drawer .interaction-tool {
    min-height: 42px;
  }
  .editor-submodal-card,
  .share-link-card {
    border-radius: 18px;
  }
  .editor-submodal-card {
    padding: 0 16px 16px;
  }
  .editor-submodal-head {
    margin: 0 -16px;
    padding: 16px 16px 12px;
  }
  .share-link-card {
    padding: 0 16px 16px;
  }
  .share-link-card .share-link-head {
    margin: 0 -16px;
    padding: 17px 16px 13px;
  }
  .editor-submodal-head h3,
  .share-link-head h3 {
    font-size: 20px;
  }
  .editor-submodal-hint,
  .share-link-hint {
    margin-top: 12px;
    font-size: 12px;
  }
  .audio-modal-tabs {
    top: 62px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .interaction-drawer .editor-subtool,
  .interaction-drawer .interaction-tool,
  .drawer-close,
  .audio-modal-tab,
  .editor-submodal-body input,
  .editor-submodal-body select,
  .editor-submodal-body textarea,
  .share-link-card input,
  .share-link-card select,
  .share-link-card textarea {
    transition: none;
  }
}


/* v55.27 · Modal Design System pass; CSS-first, preserve structure and logic hooks */
:root {
  --modal-surface: #fffdf8;
  --modal-surface-soft: #f6f2e9;
  --modal-border: rgba(18, 100, 95, .18);
  --modal-border-strong: rgba(18, 100, 95, .32);
  --modal-radius: 22px;
  --modal-control-height: 40px;
  --modal-button-height: 40px;
  --modal-focus-ring: 0 0 0 3px rgba(18, 100, 95, .14);
  --modal-danger: #a94c3b;
  --modal-danger-border: rgba(169, 76, 59, .34);
}

/* The same reading language applies to every editor surface. */
.editor-submodal,
.share-link-modal,
.overlay-editor {
  font-family: "IBM Plex Sans Thai", sans-serif;
}

.editor-submodal-card,
.share-link-card,
.overlay-editor-card {
  border-color: var(--modal-border);
  border-radius: var(--modal-radius);
  background: linear-gradient(180deg, var(--modal-surface), var(--modal-surface-soft));
  box-shadow: 0 28px 80px rgba(21, 40, 39, .28);
}

.editor-submodal-head,
.share-link-head {
  align-items: center;
  min-height: 72px;
}

.editor-submodal-head h3,
.share-link-head h3,
.overlay-editor-card h3 {
  color: var(--ink);
  font-family: "Noto Serif Thai", serif;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.editor-submodal-hint,
.share-link-hint,
.overlay-editor-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.editor-submodal-body,
.editor-setting-form,
.share-link-card > form,
.share-link-card > label {
  gap: 12px;
}

.editor-submodal-body > label,
.editor-setting-form > label,
.editor-setting-form .image-form-grid label,
.editor-setting-form .video-form-grid label,
.editor-setting-form .audio-form-grid label,
.editor-setting-form .qr-form-grid label,
.share-link-card > label,
.book-rename-label,
.family-user-form > label {
  gap: 6px;
  color: #53635f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.editor-submodal-card input:not([type="checkbox"]):not([type="file"]),
.editor-submodal-card select,
.editor-submodal-card textarea,
.share-link-card input:not([type="checkbox"]):not([type="file"]),
.share-link-card select,
.share-link-card textarea,
.overlay-editor-card input,
.image-form-grid input,
.image-form-grid select,
.video-form-grid input,
.video-form-grid select,
.audio-form-grid input,
.qr-form-grid input,
.qr-form-grid select {
  min-width: 0;
  min-height: var(--modal-control-height);
  padding: 0 11px;
  color: var(--ink);
  border: 1px solid rgba(18, 100, 95, .22);
  border-radius: 10px;
  background: #fff;
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: 13px;
  line-height: 1.25;
}

.editor-submodal-card input[type="file"],
.share-link-card input[type="file"] {
  min-height: var(--modal-control-height);
  padding: 8px 10px;
  border: 1px solid rgba(18, 100, 95, .22);
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
}

.editor-submodal-card input:focus,
.editor-submodal-card select:focus,
.editor-submodal-card textarea:focus,
.share-link-card input:focus,
.share-link-card select:focus,
.share-link-card textarea:focus,
.overlay-editor-card input:focus {
  border-color: var(--teal);
  background: #fff;
  box-shadow: var(--modal-focus-ring);
  outline: none;
}

.editor-submodal-card input:focus-visible,
.editor-submodal-card select:focus-visible,
.editor-submodal-card textarea:focus-visible,
.share-link-card input:focus-visible,
.share-link-card select:focus-visible,
.share-link-card textarea:focus-visible,
.overlay-editor-card input:focus-visible {
  outline: 2px solid rgba(233, 147, 114, .7);
  outline-offset: 2px;
}

/* Button primitive: one height, one radius, one baseline inside Modal surfaces. */
.editor-submodal-card button.primary-button,
.editor-submodal-card button.secondary-button,
.editor-submodal-card button.toc-save-button,
.editor-submodal-card button.toc-cancel-button,
.share-link-card button.primary-button,
.share-link-card button.secondary-button,
.share-link-card button.danger-fill,
.share-link-card button.compact-button,
.overlay-editor-card button.toc-save-button,
.overlay-editor-card button.toc-cancel-button {
  display: inline-flex;
  min-height: var(--modal-button-height);
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.editor-submodal-card button.primary-button,
.editor-submodal-card button.toc-save-button,
.share-link-card button.primary-button,
.overlay-editor-card button.toc-save-button {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 5px 12px rgba(18, 100, 95, .16);
}

.editor-submodal-card button.secondary-button,
.editor-submodal-card button.toc-cancel-button,
.share-link-card button.secondary-button,
.overlay-editor-card button.toc-cancel-button {
  color: var(--teal);
  background: rgba(255, 255, 255, .76);
  border-color: var(--modal-border-strong);
}

.editor-submodal-card button:hover,
.share-link-card button:hover,
.overlay-editor-card button:hover {
  transform: translateY(-1px);
}

.editor-submodal-card button:focus-visible,
.share-link-card button:focus-visible,
.overlay-editor-card button:focus-visible {
  outline: 2px solid rgba(233, 147, 114, .72);
  outline-offset: 2px;
  box-shadow: var(--modal-focus-ring);
}

.editor-submodal-done,
.share-link-actions > *,
.audio-conflict-actions > * {
  min-height: var(--modal-button-height);
}

/* Notes and status messages are surfaces, not loose lines of text. */
.editor-setting-note,
.editor-submodal-hint,
.share-link-hint,
.audio-panel-note,
.audio-library-status,
.share-link-status,
.replace-pdf-status {
  line-height: 1.55;
}

.editor-setting-note,
.audio-library-status {
  border-radius: 11px;
}

.share-link-status {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 12px;
}

/* Image/Video/Audio forms use one field rhythm. */
.image-form-grid,
.video-form-grid,
.audio-form-grid,
.qr-form-grid {
  gap: 10px;
}

.image-form-grid label,
.video-form-grid label:not(.checkbox-row),
.audio-form-grid label,
.qr-form-grid label {
  min-width: 0;
  line-height: 1.35;
}

.video-options-grid,
.audio-options-grid {
  gap: 10px;
  margin-top: 2px;
}

.video-option-card,
.audio-option-card {
  min-height: 48px;
  justify-content: flex-start;
  padding: 10px 12px;
  border-color: rgba(18, 100, 95, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .76);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.video-option-card input,
.audio-option-card input,
.video-card-fields input[type="checkbox"],
.audio-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--teal);
}

.video-card-fields,
.image-card-fields {
  gap: 9px;
}

.video-card-fields label,
.image-card-fields label {
  gap: 6px;
  min-width: 0;
  color: #53635f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.video-card-fields input:not([type="checkbox"]),
.video-card-fields select,
.image-card-fields input,
.image-card-fields select {
  min-height: 38px;
  border-radius: 9px;
  font-size: 12px;
}

/* Saved Video cards: metadata, controls and actions have three deliberate levels. */
.video-card,
.image-card,
.audio-overlay-card {
  gap: 10px;
  padding: 13px;
  border-color: rgba(18, 100, 95, .18);
  border-radius: 13px;
  background: rgba(255, 255, 255, .74);
}

.video-card > strong,
.image-card > strong,
.audio-overlay-card > strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.video-card > small,
.image-card > small,
.audio-overlay-card > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.video-card-actions,
.image-card-actions,
.audio-overlay-card-actions,
.audio-overlay-selected-actions {
  gap: 8px;
}

.video-card-actions > *,
.image-card-actions > *,
.audio-overlay-card-actions > *,
.audio-overlay-selected-actions > * {
  min-height: 38px;
  border-radius: 10px;
  font-size: 11px;
}

.video-card-actions .danger-outline,
.image-card-actions .danger-outline,
.audio-overlay-card-actions .danger-outline {
  color: var(--modal-danger);
  border-color: var(--modal-danger-border);
  background: rgba(255, 250, 247, .82);
}

/* Make the three saved-video option labels compact and consistent with the top cards. */
.video-card-fields > label:nth-child(n + 4) {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(18, 100, 95, .16);
  border-radius: 9px;
  background: rgba(220, 235, 227, .28);
}

.video-card-fields > label:nth-child(n + 4) input {
  order: -1;
  flex: 0 0 auto;
}

/* Audio Manager: tabs, toolbars, range form and controls share the same grammar. */
.audio-modal-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 2px 0 16px;
  padding: 4px;
  border: 1px solid rgba(18, 100, 95, .16);
  border-radius: 12px;
  background: rgba(220, 235, 227, .35);
}

.audio-modal-tab {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.audio-modal-tab.active {
  color: var(--teal);
  border-bottom-color: transparent;
  background: #fff;
  box-shadow: 0 3px 9px rgba(21, 40, 39, .08);
}

.audio-modal-add {
  gap: 10px;
}

.audio-file-button,
.audio-modal-add > .secondary-button {
  min-height: 42px;
  border-radius: 10px;
  font-size: 12px;
}

.audio-file-button {
  padding: 0 14px;
  border-color: rgba(18, 100, 95, .30);
  background: rgba(220, 235, 227, .34);
}

.audio-modal-add > .secondary-button {
  width: 100%;
}

.audio-modal-toolbar,
.audio-library-toolbar,
.audio-overlay-library-toolbar {
  gap: 9px;
  padding: 10px;
  border-color: rgba(18, 100, 95, .17);
  border-radius: 12px;
  background: rgba(220, 235, 227, .28);
}

.audio-modal-toolbar input,
.audio-modal-toolbar select,
.audio-library-toolbar input,
.audio-library-toolbar select,
.audio-overlay-library-toolbar input {
  min-height: 38px;
  border-radius: 9px;
  font-size: 12px;
}

.audio-modal-toolbar strong,
.audio-library-toolbar strong,
.audio-overlay-library-toolbar > span {
  font-size: 12px;
  line-height: 1.35;
}

.audio-range-form,
.nas-audio-range-form,
.audio-overlay-selected {
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
}

.audio-range-help,
.audio-file-name {
  font-size: 12px;
  line-height: 1.5;
}

.audio-range-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}

.audio-range-row label {
  gap: 6px;
  color: #53635f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.audio-range-row input,
.audio-page-field input {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
}

.audio-range-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 7px;
  align-items: stretch;
}

.audio-range-form-actions > button,
.audio-range-row > #addAudioButton {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--teal);
  border-radius: 10px;
  color: #fff;
  background: var(--teal);
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.audio-range-form-actions > .secondary-button {
  color: var(--teal);
  border-color: var(--modal-border-strong);
  background: #fff;
}

.background-audio-modal .audio-row,
.audio-library-row,
.audio-overlay-library-row {
  border-radius: 11px;
}

.background-audio-modal .audio-row {
  gap: 9px;
  padding: 10px;
}

.background-audio-modal .audio-name,
.background-audio-modal .audio-playback-summary {
  font-size: 11px;
  line-height: 1.4;
}

.background-audio-modal .audio-delete,
.background-audio-modal .audio-options-button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.audio-actions {
  gap: 7px;
}

.audio-actions button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 11px;
}

/* Link/QR/Image/Video/Audio placement bar: contextual, centered and never full-width by default. */
.image-edit-toolbar {
  width: min(760px, calc(100% - 32px));
  min-height: 58px;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border-color: rgba(18, 100, 95, .26);
  border-radius: 15px;
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 16px 36px rgba(21, 40, 39, .17);
}

.image-edit-toolbar.with-editor-drawer {
  left: 16px;
  right: 372px;
  width: auto;
  max-width: 760px;
  margin-inline: auto;
  transform: none;
}

.image-edit-toolbar-copy {
  gap: 3px;
}

.image-edit-toolbar-copy strong {
  color: var(--teal-dark);
  font-size: 13px;
  line-height: 1.25;
}

.image-edit-toolbar-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.image-edit-toolbar-actions {
  gap: 7px;
}

.image-edit-toolbar-actions button {
  min-width: 116px;
  min-height: 38px;
  border-radius: 10px;
  font-size: 11px;
}

/* Inline Link editor uses the same Modal surface instead of an unrelated mini dialog. */
.overlay-editor {
  padding: 18px;
  background: rgba(17, 42, 42, .34);
  backdrop-filter: blur(4px);
}

.overlay-editor-card {
  width: min(480px, 100%);
  padding: 23px;
}

.overlay-editor-card h3 {
  margin: 5px 0 9px;
}

.overlay-editor-hint {
  margin: 0 0 16px;
}

.overlay-editor-card label {
  gap: 6px;
  color: #53635f;
  font-size: 12px;
  font-weight: 700;
}

.overlay-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.overlay-editor-actions > button {
  width: 100%;
  min-height: 40px;
}

/* Share, Family and Permission surfaces: align actions and danger states. */
.share-link-actions,
.book-permissions-actions,
.audio-conflict-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.share-link-actions > *,
.book-permissions-actions > *,
.audio-conflict-actions > * {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.danger-fill,
.share-link-card .danger-fill {
  color: #fff;
  background: var(--modal-danger);
  border-color: var(--modal-danger);
  border-radius: 10px;
  box-shadow: 0 5px 12px rgba(169, 76, 59, .14);
}

.danger-fill:hover,
.share-link-card .danger-fill:hover {
  background: #8f3c2f;
  border-color: #8f3c2f;
}

.family-user-form,
.family-recovery-box {
  gap: 11px;
  padding: 13px;
  border-radius: 13px;
}

.family-user-form input:not([type="checkbox"]),
.family-user-form select,
.book-permissions-filter,
.guest-share-filter {
  min-height: 40px;
  border-radius: 9px;
  font-size: 12px;
}

.family-user-form .checkbox-row {
  min-height: 38px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid rgba(18, 100, 95, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .62);
}

.family-user-form .checkbox-row input {
  accent-color: var(--teal);
}

.book-permissions-toolbar {
  gap: 9px;
}

.book-permission-row,
.family-user-row {
  min-height: 54px;
  padding: 12px;
  border-radius: 11px;
}

.book-permission-toggle input,
.family-user-form input[type="checkbox"] {
  accent-color: var(--teal);
}

@media (max-width: 900px) {
  .image-edit-toolbar.with-editor-drawer {
    left: 12px;
    right: 356px;
    max-width: none;
    margin-inline: 0;
  }

  .video-card-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audio-range-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audio-range-form-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .editor-submodal-head,
  .share-link-head {
    min-height: 60px;
  }

  .editor-submodal-head h3,
  .share-link-head h3,
  .overlay-editor-card h3 {
    font-size: 20px;
  }

  .video-options-grid,
  .audio-options-grid {
    grid-template-columns: 1fr;
  }

  .video-card-fields,
  .image-card-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audio-modal-toolbar,
  .audio-library-toolbar {
    grid-template-columns: 1fr;
  }

  .audio-modal-toolbar strong,
  .audio-library-toolbar strong {
    grid-column: auto;
  }

  .audio-overlay-library-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .audio-overlay-library-toolbar input {
    grid-column: 1 / -1;
  }

  .audio-range-row {
    grid-template-columns: 1fr 1fr;
  }

  .audio-range-form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .share-link-actions,
  .book-permissions-actions,
  .audio-conflict-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .editor-submodal-card,
  .share-link-card,
  .overlay-editor-card {
    border-radius: 18px;
  }

  .editor-submodal-card,
  .share-link-card {
    font-size: 12px;
  }

  .video-card-fields,
  .image-card-fields,
  .audio-range-row,
  .overlay-editor-actions {
    grid-template-columns: 1fr;
  }

  .video-card-fields > label:nth-child(n + 4) {
    min-height: 40px;
  }

  .audio-range-form-actions,
  .share-link-actions,
  .book-permissions-actions,
  .audio-conflict-actions {
    grid-template-columns: 1fr;
  }

  .image-edit-toolbar,
  .image-edit-toolbar.with-editor-drawer {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 11px;
    transform: none;
  }

  .image-edit-toolbar-actions {
    width: 100%;
  }

  .image-edit-toolbar-actions button {
    min-width: 0;
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editor-submodal-card button,
  .share-link-card button,
  .overlay-editor-card button,
  .image-edit-toolbar-actions button {
    transition: none;
  }
}


/* v55.28 · Compact centered placement toolbar; preserve drag/resize logic hooks */
.image-edit-toolbar {
  box-sizing: border-box;
  left: 50%;
  right: auto;
  width: fit-content;
  max-width: min(720px, calc(100% - 32px));
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  transform: translateX(-50%);
  top: 12px;
  padding: 8px 10px 8px 14px;
}

.image-edit-toolbar.with-editor-drawer {
  left: calc(50% - 178px);
  right: auto;
  width: fit-content;
  max-width: min(720px, calc(100% - 400px));
  margin-inline: 0;
  transform: translateX(-50%);
}

.image-edit-toolbar-copy {
  flex: 0 1 auto;
  max-width: clamp(180px, 38vw, 420px);
}

.image-edit-toolbar-copy strong,
.image-edit-toolbar-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-edit-toolbar-actions {
  flex: 0 0 auto;
  justify-content: center;
}

@media (max-width: 900px) {
  .image-edit-toolbar.with-editor-drawer {
    left: calc(50% - 166px);
    max-width: min(640px, calc(100% - 356px));
  }
}

@media (max-width: 620px) {
  .image-edit-toolbar,
  .image-edit-toolbar.with-editor-drawer {
    top: 8px;
    left: 50%;
    right: auto;
    width: min(360px, calc(100% - 20px));
    max-width: calc(100% - 20px);
    padding: 9px;
    transform: translateX(-50%);
  }

  .image-edit-toolbar-copy {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .image-edit-toolbar-copy strong,
  .image-edit-toolbar-copy span {
    white-space: normal;
  }

  .image-edit-toolbar-actions {
    width: 100%;
  }
}


/* v55.29 · Tighter placement actions and exact paper-centered toolbar */
.image-edit-toolbar {
  gap: 8px;
  max-width: min(500px, calc(100% - 32px));
  padding: 6px 7px 6px 10px;
}

.image-edit-toolbar.with-editor-drawer {
  max-width: min(480px, calc(100% - 400px));
}

.image-edit-toolbar-copy {
  max-width: clamp(145px, 24vw, 260px);
}

.image-edit-toolbar-actions {
  gap: 4px;
}

.image-edit-toolbar-actions button.compact-button {
  width: 106px;
  min-width: 106px;
  min-height: 29px;
  padding: 0 8px;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .image-edit-toolbar-copy {
    max-width: min(235px, 31vw);
  }

  .image-edit-toolbar.with-editor-drawer {
    max-width: min(460px, calc(100% - 356px));
  }
}

@media (max-width: 620px) {
  .image-edit-toolbar,
  .image-edit-toolbar.with-editor-drawer {
    max-width: calc(100% - 20px);
    padding: 8px;
  }

  .image-edit-toolbar-actions {
    width: auto;
    justify-content: center;
  }

  .image-edit-toolbar-actions button.compact-button {
    flex: 0 1 106px;
    width: 106px;
    min-width: 106px;
    min-height: 30px;
    padding-inline: 8px;
  }
}


/* v56.0 · Auto Page Mapping + Manual Fallback review surface */
.replace-pdf-action-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.replace-pdf-action-group .compact-button {
  width: 100%;
}

.replace-pdf-auto-mapping {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(18, 100, 95, .20);
  border-radius: 10px;
  background: rgba(220, 235, 227, .28);
}

.replace-pdf-auto-mapping h4 {
  margin: 0;
  color: var(--teal);
  font-size: 13px;
}

.replace-pdf-mapping-list {
  display: grid;
  gap: 6px;
  max-height: min(38dvh, 360px);
  overflow-y: auto;
  padding: 2px;
  scrollbar-gutter: stable;
}

.replace-pdf-mapping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(18, 100, 95, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .75);
}

.replace-pdf-mapping-row.is-modified,
.replace-pdf-mapping-row.is-deleted,
.replace-pdf-mapping-row.is-inserted {
  border-color: rgba(180, 126, 49, .34);
  background: rgba(240, 198, 135, .14);
}

.replace-pdf-mapping-row.is-matched {
  background: rgba(255, 255, 255, .62);
}

.replace-pdf-mapping-info {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.replace-pdf-mapping-info strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replace-pdf-mapping-info small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.replace-pdf-mapping-control,
.replace-pdf-mapping-delete {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.replace-pdf-mapping-control input {
  width: 72px;
  min-height: 30px;
  padding: 0 6px;
  color: var(--ink);
  border: 1px solid rgba(18, 100, 95, .22);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
}

.replace-pdf-mapping-delete {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 15px;
}

.replace-pdf-mapping-delete input {
  accent-color: #b37b30;
}

@media (max-width: 620px) {
  .replace-pdf-action-group {
    grid-template-columns: 1fr;
  }

  .replace-pdf-mapping-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .replace-pdf-mapping-delete {
    grid-column: 1 / -1;
    padding-top: 0;
  }
}

/* UX/UI polish round 1 · Sandbox only · v56.3 behavior preserved */

/* 1) Consistent controls inside editor/share modals. */
.editor-submodal-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.editor-submodal-card select,
.editor-submodal-card textarea,
.share-link-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.share-link-card select,
.share-link-card textarea,
.overlay-editor-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.overlay-editor-card select,
.overlay-editor-card textarea {
  min-height: 40px;
  border-radius: 9px;
  font-size: 12px;
}

.editor-submodal-card button.compact-button,
.share-link-card button.compact-button,
.overlay-editor-card button.compact-button,
.editor-submodal-card .toc-save-button,
.editor-submodal-card .toc-cancel-button,
.audio-conflict-actions button,
.overlay-editor-actions > button,
.share-link-actions > button,
.share-link-actions > .danger-fill {
  min-height: 38px;
  padding-inline: 13px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.25;
}

.editor-submodal-card button:focus-visible,
.share-link-card button:focus-visible,
.overlay-editor-card button:focus-visible,
.editor-submodal-card input:focus-visible,
.editor-submodal-card select:focus-visible,
.editor-submodal-card textarea:focus-visible,
.share-link-card input:focus-visible,
.share-link-card select:focus-visible,
.share-link-card textarea:focus-visible,
.overlay-editor-card input:focus-visible,
.overlay-editor-card select:focus-visible,
.overlay-editor-card textarea:focus-visible {
  outline: 3px solid rgba(233, 147, 114, .42);
  outline-offset: 2px;
}

.editor-submodal-body { gap: 10px; }
.editor-submodal-actions,
.overlay-editor-actions,
.audio-conflict-actions,
.share-link-actions { gap: 8px; }

/* 2) Compact, readable placement toolbar shared by Image/Video/Audio/QR. */
.image-edit-toolbar {
  z-index: 28;
  top: 12px;
  width: min(500px, calc(100% - 32px));
  max-width: 500px;
  gap: 10px;
  padding: 8px 10px 8px 12px;
}

.image-edit-toolbar-copy { min-width: 0; }
.image-edit-toolbar-copy strong { font-size: 12px; }
.image-edit-toolbar-copy span { line-height: 1.35; }
.image-edit-toolbar-actions { flex-wrap: wrap; gap: 6px; }
.image-edit-toolbar-actions button.compact-button {
  width: 106px;
  min-width: 106px;
  min-height: 31px;
  padding-inline: 8px;
  border-radius: 8px;
  font-size: 11px;
}

.image-edit-toolbar.with-editor-drawer {
  max-width: 480px;
}

/* 3) Reduce card density only when a card has many actions; keep 2–3 actions unchanged. */
.library-grid .library-book-card h3 {
  display: -webkit-box;
  min-height: calc(1.35em * 2);
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.library-grid .library-book-card-body { gap: 8px; }
.library-grid .library-book-actions:has(> .compact-button:nth-child(4)) {
  align-items: stretch;
}
.library-grid .library-book-actions:has(> .compact-button:nth-child(4)) .compact-button {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

@media (max-width: 620px) {
  .editor-submodal-card button.compact-button,
  .share-link-card button.compact-button,
  .overlay-editor-card button.compact-button,
  .editor-submodal-card .toc-save-button,
  .editor-submodal-card .toc-cancel-button,
  .audio-conflict-actions button,
  .overlay-editor-actions > button,
  .share-link-actions > button,
  .share-link-actions > .danger-fill {
    min-height: 38px;
  }

  .image-edit-toolbar {
    top: 8px;
    width: min(360px, calc(100% - 20px));
    max-width: 360px;
    padding: 8px;
  }
  .image-edit-toolbar-copy { flex: 1 1 100%; }
  .image-edit-toolbar-copy span { white-space: normal; }
  .image-edit-toolbar-actions { width: 100%; }
  .image-edit-toolbar-actions button.compact-button {
    flex: 1 1 calc(50% - 3px);
    width: auto;
    min-width: 0;
  }
}


/* v56.7 · Home shortcuts and Dashboard pagination */
.quick-card-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.quick-card-button:hover {
  transform: translateY(-3px);
  border-color: rgba(18,100,95,.3);
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 26px rgba(21,40,39,.08);
}
.quick-card-button:focus-visible {
  outline: 3px solid rgba(18,100,95,.28);
  outline-offset: 3px;
}
.quick-card-cta {
  display: block;
  margin-top: 11px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.library-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(18,100,95,.1);
}
.library-pagination .compact-button {
  min-width: 104px;
}
.library-page-status {
  min-width: 190px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.guest-share-picker-card {
  width: min(100%, 560px);
}
.guest-share-picker-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  margin-top: 12px;
  padding: 2px 4px 2px 0;
}
.guest-share-picker-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  color: var(--ink);
  border: 1px solid rgba(18,100,95,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.guest-share-picker-row:hover,
.guest-share-picker-row:focus-visible {
  border-color: rgba(18,100,95,.42);
  background: rgba(220,235,227,.5);
}
.guest-share-picker-row:focus-visible {
  outline: 3px solid rgba(18,100,95,.22);
  outline-offset: 2px;
}
.guest-share-picker-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guest-share-picker-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .library-pagination {
    gap: 8px;
  }
  .library-pagination .compact-button {
    min-width: 0;
    padding-inline: 10px;
  }
  .library-page-status {
    min-width: 0;
    flex: 1 1 100%;
    order: -1;
  }
}