/* =============================================================
   ธรรมบท ๒ ภาษา — ธีมบาลีธันเดอร์ (หลวงพี่สั่ง ๗ ต.ค. ๒๕๖๙)
   โหลดทับ ebook.css · ดีไซน์ตาม design.md ของ thunder:
   คราม = สิ่งที่กดได้ · ทอง = จุดเด่น/ไฮไลต์ · ขาวบนพื้น slate-50 · Sarabun
   สีตัวอักษรเนื้อหา (บาลี น้ำตาล · คำแปล น้ำเงินเข้ม · อรรถกถา เขียว) คงสีเดิมตามที่หลวงพี่สั่ง
   ============================================================= */

:root {
  /* ชื่อตัวแปรเดิมของ ebook.css → ค่าใหม่ของธีม (ทุก rule เดิมที่อ้าง var ได้สีใหม่เอง) */
  --parchment:      #f8fafc;   /* slate-50 พื้นหน้า */
  --parchment-deep: #f1f5f9;   /* slate-100 */
  --cream:          #ffffff;   /* การ์ด/แผง */
  --gold:           #6366f1;   /* indigo-500 */
  --gold-light:     #c7d2fe;   /* indigo-200 */
  --gold-dark:      #4f46e5;   /* indigo-600 */
  --brown:          #4338ca;   /* indigo-700 */
  --brown-dark:     #1e1b4b;   /* indigo-950 */
  --brown-light:    #4f46e5;
  --ink:            #1f2937;   /* gray-800 */
  --ink-light:      #374151;   /* gray-700 */
  /* สีตัวอักษรเนื้อหาคงสีเดิม (หลวงพี่สั่ง ๗ ต.ค. ๒๕๖๙): บาลี น้ำตาล · คำแปล น้ำเงินเข้ม · อรรถกถา เขียว */
  --pali-color:     #7A2E0E;
  --thai-color:     #1A3A6B;
  --attha-color:    #2D5016;
  --accent:         #e11d48;   /* rose-600 */
  --muted:          #6b7280;   /* gray-500 */
  --border:         #e5e7eb;   /* gray-200 */
  --border-light:   #f3f4f6;   /* gray-100 */
  --shadow:         rgba(15, 23, 42, 0.05);
  --shadow-md:      rgba(15, 23, 42, 0.09);
  --shadow-lg:      rgba(15, 23, 42, 0.14);
  --font-display:   'Sarabun', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --pt-indigo-50:  #eef2ff;
  --pt-indigo-100: #e0e7ff;
  --pt-indigo-200: #c7d2fe;
  --pt-indigo-500: #6366f1;
  --pt-indigo-600: #4f46e5;
  --pt-indigo-700: #4338ca;
  --pt-amber-400:  #fbbf24;
  --pt-amber-500:  #f59e0b;
  --pt-gray-400:   #9ca3af;
  --pt-gray-500:   #6b7280;
  --pt-gray-700:   #374151;
  --pt-gray-900:   #111827;
  --pt-lift: 0 12px 24px -12px rgba(15, 23, 42, 0.22);
}

body {
  background-color: #f8fafc;
  background-image:
    radial-gradient(1100px 420px at 50% -120px, rgba(224, 231, 255, 0.75), transparent 70%),
    radial-gradient(700px 360px at 100% 0, rgba(245, 243, 255, 0.9), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  font-family: 'Sarabun', sans-serif;
  color: var(--ink);
}

/* ---------------- แถบบน: แบรนด์ + ชื่อเรื่อง + บัญชี ---------------- */
.en-user-bar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  padding: 8px max(16px, calc((100% - 1080px) / 2));
  min-height: 60px;
  gap: 14px;
}
.en-user-bar::after { display: none; }

.en-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 12px;
}
.en-brand img { height: 36px; width: auto; display: block; }
.en-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.en-brand-name { font-weight: 800; font-size: 1.02rem; color: var(--pt-gray-900); }
.en-brand-sub { font-size: 0.75rem; font-weight: 600; color: var(--pt-gray-400); letter-spacing: 0.02em; }
.en-brand:hover .en-brand-name { color: var(--pt-indigo-600); }

.en-bar-spacer { flex: 1; }

.en-story-title-bar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pt-indigo-700);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.en-story-title-bar i { color: var(--pt-amber-500); margin: 0; flex-shrink: 0; }
.en-story-title-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.en-sync-status { color: var(--pt-gray-500); font-size: 0.8rem; }

.en-login-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 12px;
  background: var(--pt-indigo-600);
  border: 1px solid var(--pt-indigo-600);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px -4px rgba(79, 70, 229, 0.55);
}
.en-login-link:hover { background: var(--pt-indigo-700); border-color: var(--pt-indigo-700); color: #fff; }

.en-user-menu-btn {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px 4px 5px;
  background: #fff;
  color: var(--pt-gray-700);
  font-weight: 600;
}
.en-user-menu-btn:hover { background: var(--pt-indigo-50); border-color: var(--pt-indigo-200); }
.en-user-menu-btn img { width: 30px; height: 30px; border: 2px solid var(--pt-indigo-100); }
.en-user-dropdown { border-radius: 14px; box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.25); }
.en-user-dropdown a:hover { background: var(--pt-indigo-50); color: var(--pt-indigo-700); }

/* ---------------- แถบเครื่องมืออ่าน (ปักบนสุดเมื่อเลื่อน) ---------------- */
.en-nav {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.35);
  padding: 10px 16px;
}
.en-nav-inner { max-width: 1080px; margin: 0 auto; gap: 8px; }

.en-nav-btn {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--pt-gray-700);
}
.en-nav-btn:hover:not(:disabled) {
  background: var(--pt-indigo-50);
  border-color: var(--pt-indigo-200);
  color: var(--pt-indigo-600);
}

.en-book-select,
.en-page-select,
.en-nav .select2-container .select2-selection--single {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  color: var(--ink);
  font-weight: 600;
}
.en-book-select { color: var(--pt-indigo-700); font-weight: 800; }
.en-book-select:focus,
.en-page-select:focus,
.en-nav .select2-container--focus .select2-selection--single,
.en-nav .select2-container--open .select2-selection--single {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px var(--pt-indigo-100) !important;
  outline: none;
}
.en-nav .select2-selection__rendered { color: var(--ink) !important; font-weight: 600; }
.en-page-label { color: var(--pt-gray-500); font-weight: 600; }

.en-reader-action {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--pt-gray-700);
  font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s;
}
.en-reader-action .bi { color: var(--pt-indigo-500); }
.en-reader-action:hover {
  box-shadow: none;
  background: var(--pt-indigo-50);
  border-color: var(--pt-indigo-200);
  color: var(--pt-indigo-700);
}
.en-reader-action[aria-pressed="true"] {
  background: var(--pt-indigo-600);
  border-color: var(--pt-indigo-600);
  color: #fff;
}
.en-reader-action[aria-pressed="true"] .bi { color: #fff; }

.en-nav-btn-page { border-radius: 12px; transition: background-color .15s, color .15s, border-color .15s; }
.en-nav-btn-page.prev {
  background: #fff;
  color: var(--pt-indigo-600);
  border: 1px solid var(--pt-indigo-200);
}
.en-nav-btn-page.prev:hover:not(:disabled) { background: var(--pt-indigo-50); }
.en-nav-btn-page.next {
  background: var(--pt-indigo-600);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(79, 70, 229, 0.6);
}
.en-nav-btn-page.next:hover:not(:disabled) { background: var(--pt-indigo-700); }
.en-nav-btn-page:disabled,
.en-nav-btn-page.prev:disabled,
.en-nav-btn-page.next:disabled {
  background: #f3f4f6;
  color: #d1d5db;
  border: 1px solid var(--border-light);
  box-shadow: none;
}

#app :is(button, a, input, select, [role="button"]):focus-visible {
  outline: 3px solid #818cf8;
  outline-offset: 2px;
}

/* ปุ่มลอย (โผล่เมื่อแถบเครื่องมือซ่อนตอนเลื่อนอ่าน) */
.en-panel-toggle {
  background: var(--pt-indigo-600);
  box-shadow: 0 8px 20px -6px rgba(79, 70, 229, 0.6);
}
.en-panel-toggle:hover { background: var(--pt-indigo-700); box-shadow: 0 10px 24px -6px rgba(79, 70, 229, 0.7); }

/* ---------------- หน้าแรก: hero + เลือกภาค ---------------- */
.en-main { max-width: 1080px; padding: 24px 24px 40px; }

.en-hero {
  text-align: left;
  padding: 36px 40px 32px;
  margin: 0 0 8px;
  border-radius: 24px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #e0f2fe 0%, #eff6ff 45%, #f5f3ff 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  animation: ptPop .5s ease both;
}
.en-hero::before {
  animation: none;
  opacity: 1;
  background:
    radial-gradient(260px 200px at 92% 18%, rgba(251, 191, 36, 0.20), transparent 70%),
    radial-gradient(320px 240px at 78% 110%, rgba(99, 102, 241, 0.16), transparent 70%);
}
.en-hero > * { position: relative; z-index: 1; }

.en-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--pt-indigo-100);
  color: var(--pt-indigo-600);
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.en-hero-title {
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pt-gray-900);
  text-shadow: none;
  margin: 0 0 10px;
}
.en-hero-gold {
  background: linear-gradient(95deg, var(--pt-amber-400), var(--pt-amber-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.en-hero-subtitle {
  max-width: 40em;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--pt-gray-700);
  margin: 0;
}
.en-hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
}
.en-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pt-gray-700);
}
.en-hero-chips .bi { color: var(--pt-indigo-500); }
.en-hero-source { margin: 16px 0 0; font-size: 0.85rem; color: var(--pt-gray-500); }

.en-book-head { margin: 30px 2px 14px; }
.en-book-head h2 { font-size: 1.4rem; font-weight: 800; color: var(--pt-gray-900); margin: 0 0 2px; }
.en-book-head p { font-size: 0.92rem; color: var(--pt-gray-500); margin: 0; }

.en-book-grid,
.en-main .en-book-grid {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.en-book-card {
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.en-book-card:hover,
.en-book-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--pt-lift);
  border-color: var(--pt-indigo-200);
}
.en-book-card-inner { aspect-ratio: auto; }
.en-book-cover { padding: 10px 10px 0; }
.en-book-cover img {
  width: 100%;
  max-height: none;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.45);
}
.en-book-fallback {
  width: 100%;
  aspect-ratio: 210 / 297;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--pt-indigo-600), #312e81);
}
.en-book-fallback-title { color: #e0e7ff; }
.en-book-fallback-num { font-family: 'Sarabun', sans-serif; color: var(--pt-amber-400); font-size: 2.6rem; font-weight: 800; }
.en-book-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  padding: 10px 12px 12px;
  background: transparent;
  border-top: 0;
}
.en-book-label-title { font-size: 1.05rem; font-weight: 800; color: var(--pt-gray-900); }
.en-book-label-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pt-indigo-600);
  white-space: nowrap;
}
.en-book-card:hover .en-book-label-sub .bi { transform: translateX(2px); }
.en-book-label-sub .bi { transition: transform .15s; }

/* ---------------- หน้าอ่าน ---------------- */
#columnView, #lineView {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 28px 36px;
}
.en-col-header h3 { font-weight: 800; border-bottom: 2px solid var(--border-light); }
.en-col-header h3:first-child { color: var(--thai-color); }
.en-col-header h3:last-child { color: var(--pali-color); }
.column-item { border-bottom-color: var(--border-light); }

.sentence-pair { border-bottom: 1px solid #e5e7eb; }
.line-number { color: var(--pt-gray-400); font-weight: 600; }

.pali-word:hover {
  background: var(--pt-indigo-50);
  box-shadow: 0 0 0 1px var(--pt-indigo-100);
}
.thai-word:hover {
  background: #f3f4f6;
  box-shadow: 0 0 0 1px #e5e7eb;
}
.word-highlighted {
  background: #fef3c7 !important;
  box-shadow: 0 0 0 1px #fcd34d;
}

.word-by-word-btn { background: var(--pt-indigo-600); border-radius: 8px; }
.word-by-word-btn:hover { background: var(--pt-indigo-700); }

/* ปุ่มคลิปสอนยกศัพท์ ▶ */
.yokvid-btn:hover { background: var(--pt-indigo-50); }

.en-page-info { font-style: normal; color: var(--pt-gray-500); }

.en-bottom-btn { border-radius: 12px; font-weight: 700; min-height: 46px; }
.en-bottom-prev,
.en-bottom-next {
  background: #fff;
  color: var(--pt-gray-700);
  border: 1px solid var(--border);
}
.en-bottom-prev:hover:not(:disabled),
.en-bottom-next:hover:not(:disabled) {
  background: var(--pt-indigo-50);
  border-color: var(--pt-indigo-200);
  color: var(--pt-indigo-700);
}
.en-bottom-book {
  background: var(--pt-indigo-600);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(79, 70, 229, 0.6);
}
.en-bottom-book:hover { background: var(--pt-indigo-700); box-shadow: 0 8px 18px -6px rgba(79, 70, 229, 0.65); }

/* ---------------- ส่วนท้าย ---------------- */
.en-footer { color: var(--pt-gray-500); padding-top: 28px; }
.en-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid var(--pt-indigo-200);
  background: #fff;
  color: var(--pt-indigo-600);
  font-weight: 700;
}
.en-footer a:hover { background: var(--pt-indigo-50); color: var(--pt-indigo-700); }
.en-footer p { margin-bottom: 4px; }
.en-sources-link { color: var(--pt-indigo-600); text-underline-offset: 3px; }
.en-sources-link:hover { color: var(--pt-indigo-700); }
.en-footer-ver { font-size: 0.8rem; color: var(--pt-gray-400); margin-top: 6px; }

/* ---------------- แผงข้าง / กล่อง ---------------- */
.offcanvas {
  background: #fff;
  box-shadow: 0 0 40px rgba(15, 23, 42, 0.16);
}
.offcanvas-header {
  background: #fff;
  border-bottom: 1px solid var(--border-light) !important;
}
.offcanvas-title { font-weight: 800; color: var(--pt-gray-900) !important; }
.offcanvas-title .bi { color: var(--pt-indigo-500); }
.en-settings-section { border-bottom-color: var(--border-light); }
.en-settings-label { color: var(--pt-indigo-600); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
.en-settings-home:hover,
.en-settings-home:focus-visible { background: var(--pt-indigo-600); border-color: var(--pt-indigo-600); color: #fff; }
.en-settings-home:hover .bi { color: #fff; }
.offcanvas .form-select:focus,
.offcanvas .form-control:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px var(--pt-indigo-100);
}
.modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.3); }

/* แผนอ่านสอบ (เข้ามาจาก /exam-view) */
.en-exam-study {
  background: var(--pt-indigo-50);
  border: 1px solid var(--pt-indigo-200);
  border-radius: 16px;
  color: var(--ink);
  font-family: 'Sarabun', sans-serif;
}
.en-exam-study strong { color: var(--pt-indigo-700); }
.en-exam-study-actions button,
.en-exam-study-actions a {
  border: 1px solid var(--pt-indigo-200);
  color: var(--pt-indigo-700);
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
}
.en-exam-study-actions button[aria-pressed="true"] { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.en-exam-study-actions :focus-visible { outline-color: #818cf8; }

/* โหมดกรองฝึกแปล */
.tagf-banner {
  background: var(--pt-indigo-50);
  border: 1px solid var(--pt-indigo-200);
  color: var(--pt-indigo-700);
  border-radius: 14px;
}
.tagf-chip { color: var(--pt-gray-700); }
.tagf-tags { background: #f8fafc; }
.tagf-axis { color: var(--pt-indigo-600); }

@keyframes ptPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------- จอแคบ ---------------- */
@media (max-width: 1024px) {
  .en-main .en-book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 768px) {
  .en-main { padding: 14px 12px 32px; }
  .en-hero { padding: 26px 20px 22px; border-radius: 20px; }
  .en-hero-subtitle { font-size: 0.98rem; }
  .en-hero-chips li { font-size: 0.8rem; padding: 5px 10px; }
  .en-main .en-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .en-book-head { margin-top: 24px; }
  #columnView, #lineView { padding: 18px 16px; border-radius: 16px; }
}
@media (max-width: 640px) {
  .en-user-bar { padding: 8px 12px; min-height: 56px; gap: 10px; }
  .en-brand img { height: 32px; }
  /* เปิดอ่านอยู่: ชื่อเรื่องสำคัญกว่าชื่อแอป → เหลือแค่โลโก้ */
  .en-user-bar:has(.en-story-title-bar:not([style*="none"])) .en-brand-text { display: none; }
  .en-story-title-bar { padding-left: 10px; font-size: 0.9rem; }
  .en-login-link { padding: 6px 12px; font-size: 0.85rem; }
  .en-user-menu-btn span { max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .en-nav { padding: 8px 10px; }
  /* ปุ่มเครื่องมือแถวเดียว เลื่อนข้างได้ (ไม่ตกบรรทัดจนแถบบนสูง) — นำหน้าด้วย .en-nav ให้ชนะ <style> ในหน้า */
  .en-nav .en-nav-right {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .en-nav .en-nav-right::-webkit-scrollbar { display: none; }
  .en-nav .en-nav-right .en-reader-action { flex: 1 0 auto; white-space: nowrap; padding-inline: .6rem; }
  .en-book-label { padding: 8px 10px 10px; }
  .en-book-label-title { font-size: 0.98rem; }
  .en-book-label-sub { font-size: 0.75rem; }
}
@media (max-width: 380px) {
  .en-book-label { flex-direction: column; align-items: flex-start; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .en-hero { animation: none; }
  .en-book-card, .en-book-card:hover { transition: none; transform: none; }
}

/* ปุ่ม bootstrap ในแผงตั้งค่า (− / + ขนาดฟอนต์ ฯลฯ) ให้เข้าชุดคราม–ขาว */
.offcanvas .btn-secondary,
.offcanvas .btn-outline-secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--pt-indigo-600);
  border-radius: 12px;
  min-width: 44px;
}
.offcanvas .btn-secondary:hover:not(:disabled),
.offcanvas .btn-outline-secondary:hover:not(:disabled) {
  background: var(--pt-indigo-50);
  border-color: var(--pt-indigo-200);
  color: var(--pt-indigo-700);
}
#app .offcanvas .btn.btn-secondary:disabled { background: #f9fafb !important; color: #d1d5db !important; border-color: var(--border-light) !important; opacity: 1; }

/* สารบัญ (select2 ในแผงตั้งค่า) — ฟอนต์บาลีตัวเล็กกว่า Sarabun จึงต้องขยายเอง (หลวงพี่ทัก ๗ ต.ค. ๒๕๖๙ ว่าอ่านยาก) */
/* ต้องแรงกว่า .select2-container--open .select2-dropdown[dir] .select2-results__option ใน ebook.css */
#tocSelect + .select2-container .select2-selection__rendered,
.toc-select2 .select2-selection__rendered,
.select2-container--open .select2-dropdown.toc-select2 .select2-results__option {
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--ink);
}
.toc-select2 .select2-results__option {
  padding: 10px 12px;
  border-radius: 10px;
}
.toc-select2 .select2-results__option + .select2-results__option { margin-top: 2px; }
.toc-select2 .select2-results__option--highlighted,
.toc-select2 .select2-results__option[aria-selected="true"] {
  background: var(--pt-indigo-50) !important;
  color: var(--pt-indigo-700) !important;
}
.toc-select2 .select2-results > .select2-results__options { max-height: min(60vh, 460px); }
.toc-select2 .select2-search__field {
  font-size: 1.05rem;
  min-height: 44px;
  border-radius: 12px !important;
}
.toc-select2 .select2-search__field:focus { border-color: #818cf8 !important; box-shadow: 0 0 0 3px var(--pt-indigo-100); outline: none; }
#tocSelect + .select2-container .select2-selection--single { min-height: 48px; display: flex; align-items: center; border-radius: 12px; }
#tocSelect + .select2-container .select2-selection__placeholder { font-family: 'Sarabun', sans-serif; font-size: 1rem; color: var(--pt-gray-400); }

/* =============================================================
   สีหน้ากระดาษ (เมนูตั้งค่า → สีหน้ากระดาษ · หลวงพี่สั่ง ๘ ต.ค. ๒๕๖๙)
   <html data-paper="…"> ตั้งก่อนวาดหน้าที่ <head> · ไม่มี = ขาว
   สีสว่าง ๔ แบบเปลี่ยนแค่พื้นกระดาษ/พื้นหน้า · สีเข้ม ๒ แบบเปลี่ยนสีตัวอักษรให้อ่านบนพื้นมืดด้วย
   หลักเดิมทุกแบบ: บาลีโทนน้ำตาล · คำแปลโทนน้ำเงิน · อรรถกถา/ศัพท์โยคโทนเขียว
   ============================================================= */
:root { --paper: #ffffff; --paper-page: #f8fafc; --paper-line: #e5e7eb; }
[data-paper="cream"] { --paper: #fdf6e7; --paper-page: #f4ecda; --paper-line: #eadcbe; }
[data-paper="sepia"] { --paper: #f1e4c8; --paper-page: #e6d5b1; --paper-line: #d8c49b;
  --pali-color: #6b2a0b; --thai-color: #1d2f55; --ink: #2b2118; }
[data-paper="tea"]   { --paper: #eef5e8; --paper-page: #e1ecd8; --paper-line: #d3e2c7; }

[data-paper] body { background-color: var(--paper-page); background-image: none; }
[data-paper] #lineView, [data-paper] #columnView {
  background: var(--paper); border-color: var(--paper-line);
}
[data-paper] .sentence-pair { border-bottom-color: var(--paper-line); }
[data-paper] .column-item, [data-paper] .en-col-header h3 { border-color: var(--paper-line); }
[data-paper="cream"] .idiom-interlinear-text,
[data-paper="sepia"] .idiom-interlinear-text,
[data-paper="tea"] .idiom-interlinear-text { background: rgba(255, 255, 255, .45); }

/* ---------- สีเข้ม: กลางคืน / ดำสนิท ---------- */
[data-paper="night"] {
  --paper: #1f2433; --paper-page: #151925; --paper-line: #2e3548;
  --dk-surface: #1f2433; --dk-surface-2: #283044; --dk-border: #343c52;
}
[data-paper="black"] {
  --paper: #000000; --paper-page: #000000; --paper-line: #23262e;
  --dk-surface: #0d0f14; --dk-surface-2: #171a21; --dk-border: #2a2e38;
}
[data-paper="night"], [data-paper="black"] {
  color-scheme: dark;
  --pali-color: #f2b98f;    /* น้ำตาลอ่อน = บาลี */
  --thai-color: #c7d5f5;    /* ฟ้าอ่อน = คำแปล */
  --attha-color: #9ed9a8;
  --ink: #e5e7eb; --ink-light: #cbd5e1; --muted: #94a3b8;
  --cream: var(--dk-surface); --parchment: var(--paper-page); --parchment-deep: var(--dk-surface-2);
  --border: var(--dk-border); --border-light: var(--paper-line);
  --brown-dark: #e0e7ff; --brown: #a5b4fc; --gold-dark: #a5b4fc; --gold: #818cf8; --gold-light: #3730a3;
  --pt-gray-900: #f1f5f9; --pt-gray-700: #cbd5e1; --pt-gray-500: #94a3b8; --pt-gray-400: #64748b;
  --pt-indigo-50: rgba(129, 140, 248, .14); --pt-indigo-100: rgba(129, 140, 248, .22); --pt-indigo-200: rgba(129, 140, 248, .38);
  --pt-indigo-600: #818cf8; --pt-indigo-700: #c7d2fe;
}
:is([data-paper="night"], [data-paper="black"]) body { color: var(--ink); }
:is([data-paper="night"], [data-paper="black"]) :is(.en-user-bar, .en-nav) {
  background: color-mix(in srgb, var(--paper-page) 92%, transparent); border-bottom-color: var(--paper-line);
}
:is([data-paper="night"], [data-paper="black"]) :is(.en-reader-action, .en-nav-btn, .en-book-select, .en-page-select,
  .en-user-menu-btn, .en-bottom-prev, .en-bottom-next, .en-footer a, .form-select, .form-control, .yokvid-btn, .yokvid-nav,
  .hidden-thai > .practice-toggle, .en-nav .select2-container .select2-selection--single) {
  background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--ink) !important;
}
:is([data-paper="night"], [data-paper="black"]) .en-nav .select2-selection__rendered { color: var(--ink) !important; }
:is([data-paper="night"], [data-paper="black"]) .en-reader-action[aria-pressed="true"] {
  background-color: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important;
}
:is([data-paper="night"], [data-paper="black"]) .en-nav-btn-page.prev { background: var(--dk-surface); border-color: var(--dk-border); }
:is([data-paper="night"], [data-paper="black"]) .en-nav-btn-page:disabled { background: var(--dk-surface-2); color: #475569; border-color: var(--dk-border); }
:is([data-paper="night"], [data-paper="black"]) .en-brand-name { color: #f1f5f9; }
:is([data-paper="night"], [data-paper="black"]) .en-story-title-bar { color: #c7d2fe; border-left-color: var(--dk-border); }
:is([data-paper="night"], [data-paper="black"]) .line-number { color: #64748b; }
/* แผงข้าง / กล่อง / select2 dropdown */
:is([data-paper="night"], [data-paper="black"]) :is(.offcanvas, .offcanvas-header, .modal-content, .select2-dropdown, .en-user-dropdown, .floating-menu) {
  background: var(--dk-surface) !important; color: var(--ink); border-color: var(--dk-border) !important;
}
:is([data-paper="night"], [data-paper="black"]) .select2-results__option { color: var(--ink) !important; }
:is([data-paper="night"], [data-paper="black"]) :is(.btn-close) { filter: invert(1) grayscale(1) brightness(1.6); }
:is([data-paper="night"], [data-paper="black"]) .offcanvas-title { color: #f1f5f9 !important; }
:is([data-paper="night"], [data-paper="black"]) .en-reader-help { color: var(--muted) !important; }
/* แถวเนื้อหาที่ใส่สีตายตัวไว้ใน ebook.css */
:is([data-paper="night"], [data-paper="black"]) .bsyok-text { color: var(--ink); }
:is([data-paper="night"], [data-paper="black"]) :is(.bsyok-text .by, .vibhatti-yok, .yok-supplied) { color: #86efac; }
:is([data-paper="night"], [data-paper="black"]) .idiom-interlinear-text { background: var(--dk-surface-2); border-color: var(--dk-border); border-left-color: #f2b98f; }
:is([data-paper="night"], [data-paper="black"]) :is(.idiom-interlinear-heading, .yoksap-heading, .vibhatti-heading) { color: #fcd9a8; }
:is([data-paper="night"], [data-paper="black"]) :is(.yoksap-gloss, .idiom-interlinear-gloss) { color: #cbd5e1; }
:is([data-paper="night"], [data-paper="black"]) .yoksap-unit:hover { background: rgba(255, 255, 255, .06); }
:is([data-paper="night"], [data-paper="black"]) .pali-word:hover { background: rgba(242, 185, 143, .14); box-shadow: none; }
:is([data-paper="night"], [data-paper="black"]) .thai-word:hover { background: rgba(199, 213, 245, .12); box-shadow: none; }
:is([data-paper="night"], [data-paper="black"]) .word-highlighted { background: rgba(251, 191, 36, .32) !important; box-shadow: none; }
:is([data-paper="night"], [data-paper="black"]) .en-exam-study { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--ink); }
:is([data-paper="night"], [data-paper="black"]) .tagf-banner { background: var(--dk-surface-2); border-color: var(--dk-border); color: #c7d2fe; }
:is([data-paper="night"], [data-paper="black"]) .en-footer-ver { color: #64748b; }

/* ---------- ตัวเลือกในเมนู ---------- */
.en-paper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.en-paper-opt {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 6px 6px 8px; border-radius: 12px; border: 1px solid var(--border); background: transparent;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.en-paper-opt:hover { border-color: #a5b4fc; }
.en-paper-opt[aria-checked="true"] { border-color: #4f46e5; box-shadow: 0 0 0 2px #4f46e5; }
.en-paper-swatch {
  display: flex; flex-direction: column; gap: 4px; height: 44px; padding: 8px 9px; margin-bottom: 4px;
  border-radius: 8px; border: 1px solid rgba(0, 0, 0, .08); background: var(--sw-bg);
}
.en-paper-swatch span { display: block; height: 4px; border-radius: 3px; }
.en-paper-swatch .sw-pali { width: 80%; background: var(--sw-pali); }
.en-paper-swatch .sw-thai { width: 95%; background: var(--sw-thai); opacity: .75; }
.en-paper-swatch .sw-short { width: 55%; }
.en-paper-name { font-size: .88rem; font-weight: 700; line-height: 1.25; }
.en-paper-hint { font-size: .72rem; line-height: 1.3; color: var(--muted); }
.en-paper-white { --sw-bg: #ffffff; --sw-pali: #7A2E0E; --sw-thai: #1A3A6B; }
.en-paper-cream { --sw-bg: #fdf6e7; --sw-pali: #7A2E0E; --sw-thai: #1A3A6B; }
.en-paper-sepia { --sw-bg: #f1e4c8; --sw-pali: #6b2a0b; --sw-thai: #1d2f55; }
.en-paper-tea   { --sw-bg: #eef5e8; --sw-pali: #7A2E0E; --sw-thai: #1A3A6B; }
.en-paper-night { --sw-bg: #1f2433; --sw-pali: #f2b98f; --sw-thai: #c7d5f5; }
.en-paper-black { --sw-bg: #000000; --sw-pali: #f2b98f; --sw-thai: #c7d5f5; }
@media (max-width: 360px) { .en-paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* แถบบนกลืนกับสีกระดาษ (สีสว่าง) */
:is([data-paper="cream"], [data-paper="sepia"], [data-paper="tea"]) :is(.en-user-bar, .en-nav) {
  background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom-color: var(--paper-line);
}
/* กล่องสารบัญ (select2) ในเมนูข้าง — สีเข้ม */
:is([data-paper="night"], [data-paper="black"]) #tocSelect + .select2-container .select2-selection--single {
  background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important;
}
:is([data-paper="night"], [data-paper="black"]) #tocSelect + .select2-container .select2-selection__rendered { color: var(--ink) !important; }
:is([data-paper="night"], [data-paper="black"]) .select2-search__field { background: var(--dk-surface-2) !important; color: var(--ink) !important; border-color: var(--dk-border) !important; }
:is([data-paper="night"], [data-paper="black"]) .toc-select2 :is(.select2-results__option--highlighted, .select2-results__option[aria-selected="true"]) {
  background: rgba(129, 140, 248, .2) !important; color: #e0e7ff !important;
}
/* ป้ายอธิบายใต้หัวแถว · เลขวิภัตติ/ศัพท์โยคเขียวเข้ม — สว่างขึ้นบนพื้นมืด */
:is([data-paper="night"], [data-paper="black"]) :is(.yoksap-heading span:last-child, .vibhatti-heading span:last-child, .idiom-interlinear-heading > span:last-child) { color: #8b93a7; }
:is([data-paper="night"], [data-paper="black"]) :is(.vibhatti-yok .vibhatti-num, .vibhatti-yok-legend, .text-green-800, .vibhatti-yok) { color: #86efac !important; }
:is([data-paper="night"], [data-paper="black"]) :is(.text-red-600) { color: #f87171 !important; }
:is([data-paper="night"], [data-paper="black"]) .vword-tag.kita-tag { color: #c4b5fd; }
:is([data-paper="night"], [data-paper="black"]) :is(.yoksap-number, .vibhatti-number) { color: #64748b; }
:is([data-paper="night"], [data-paper="black"]) :is(.vword-tag.yok-role-tag, .corr-open) { color: #86efac; }
:is([data-paper="night"], [data-paper="black"]) :is(.vibhatti-num, .vword-tag, .corr-close) { color: #fca5a5; }
:is([data-paper="night"], [data-paper="black"]) .vibhatti-yok .vibhatti-num { color: #86efac; }