/* Cueby Studio (/cueby)
   หน้ากระดาษบทใช้หน่วย ch — Courier 12pt กว้าง 1ch = 0.1 นิ้ว ระยะย่อหน้าจึงตรงมาตรฐานบทภาพยนตร์
   (เนื้อหา 6 นิ้ว = 61ch · ตัวละคร 2.2" · บทพูด 1.0"–4.5" · วงเล็บ 1.6"–4.1") */
.cueby-body {
  --cueby-ink: #111827; --cueby-muted: #6b7280; --cueby-line: #e5e7eb; --cueby-soft: #f4f4f1; --cueby-accent: #b45309;
  --cueby-font: "Courier Prime", "Sarabun", "Courier New", monospace;
}
.cueby-root { font-family: "Noto Sans Thai", system-ui, sans-serif; color: var(--cueby-ink); min-height: 70vh; }
.cueby-boot { display: flex; justify-content: center; padding: 80px 0; }
.cueby-muted { color: var(--cueby-muted); }
.cueby-root .btn { border-radius: 8px; }

/* Brand / gate */
.cueby-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.cueby-brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #111; color: #fbbf24; font-size: 1.05rem; }
.cueby-brand-lg { display: flex; justify-content: center; font-size: 1.6rem; margin-bottom: 4px; }
.cueby-brand-logo { display: block; height: 40px; width: auto; max-width: 240px; object-fit: contain; }
.cueby-brand-lg .cueby-brand-logo { height: 56px; max-width: 280px; }
/* หน้ารายการบทบนจอเล็ก — โลโก้เต็มเสมอ แค่ไม่ให้กว้างเกินจอ (ไม่สลับเป็นโลโก้แบบย่อ) */
.cueby-head .cueby-brand-logo { max-width: min(240px, 60vw); }
/* โลโก้แบบย่อ — หน้าชื่อเรื่องบนแถบบนของหน้าเขียนบทเท่านั้น */
.cueby-top-icon { flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; background: #111; color: #fbbf24; font-size: .82rem; overflow: hidden; text-decoration: none; }
.cueby-top-icon:hover { color: #fbbf24; opacity: .85; }
@media (max-width: 575px) { .cueby-top .cueby-top-back { display: none; } }
/* จอแคบมาก — ปุ่ม AI เหลือแค่ไอคอน (ยอดเครดิตดูได้ในแผง AI / tooltip) ให้ชื่อเรื่องมีที่ */
@media (max-width: 400px) { .cueby-top .cueby-credit-v { display: none; } }
.cueby-top-icon:has(img) { background: transparent; width: 68px; border-radius: 0; }
.cueby-top-icon img { width: 100%; height: 100%; object-fit: contain; }
/* โลโก้คู่สว่าง / มืด (logoImg) — ซ่อนอีกตัวตามธีม · ตัวที่เหลือยังทำตามกฎเต็ม / ย่อ ด้านล่างตามปกติ */
html:not([data-cueby-theme="dark"]) .cueby-dk,
html[data-cueby-theme="dark"] .cueby-lt { display: none !important; }
.cueby-top-icon .cueby-top-logo-full { display: none; }
@media (min-width: 1200px) {
  .cueby-top-icon.has-full { width: auto; max-width: 180px; }
  .cueby-top-icon.has-full .cueby-top-logo-full { display: block; width: auto; max-width: 180px; height: 30px; }
  .cueby-top-icon.has-full .cueby-top-logo-icon { display: none; }
}
.cueby-gate { display: flex; justify-content: center; padding: 56px 16px; }
.cueby-gate-card { background: #fff; border: 1px solid var(--cueby-line); border-radius: 16px; padding: 32px 28px; max-width: 460px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.cueby-gate-sub { text-align: center; color: var(--cueby-muted); margin: 4px 0 20px; }
.cueby-gate-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; font-size: .92rem; }
.cueby-gate-list i { color: var(--cueby-accent); margin-right: 6px; }
.cueby-legal { font-size: .74rem; color: var(--cueby-muted); margin-top: 14px; }
.cueby-legal a { color: inherit; }

/* List */
.cueby-wrap { max-width: 1320px; margin: 0 auto; padding: 24px 16px 56px; }
.cueby-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cueby-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cueby-quota { font-size: .8rem; color: var(--cueby-muted); background: #fff; border: 1px solid var(--cueby-line); border-radius: 999px; padding: 6px 12px; }
.cueby-quota.full { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.cueby-h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.cueby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cueby-card { background: #fff; border: 1px solid var(--cueby-line); border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; outline: none; }
.cueby-card:hover, .cueby-card:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(0,0,0,.22); }
.cueby-card-page { background: var(--cueby-soft); padding: 26px 18px 18px; min-height: 130px; display: flex; flex-direction: column; justify-content: center; text-align: center; font-family: var(--cueby-font); border-bottom: 1px solid var(--cueby-line); }
.cueby-card-title { font-weight: 700; text-transform: uppercase; font-size: 1rem; line-height: 1.35; word-break: break-word; }
.cueby-card-logline { font-size: .78rem; color: var(--cueby-muted); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cueby-card-body { padding: 12px 14px; position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cueby-card-meta { font-size: .8rem; font-weight: 600; }
.cueby-card-foot { font-size: .72rem; color: var(--cueby-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cueby-card-actions { position: absolute; top: -18px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.cueby-card:hover .cueby-card-actions, .cueby-card:focus-within .cueby-card-actions { opacity: 1; }
@media (hover: none) { .cueby-card-actions { opacity: 1; } }
.cueby-card-actions .btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--cueby-line); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.cueby-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #f1f5f9; color: #475569; }
.cueby-badge.bx { background: #fff1f2; color: #be123c; }
.cueby-empty { text-align: center; padding: 56px 16px; color: var(--cueby-muted); background: #fff; border: 1px dashed #d4d4d4; border-radius: 12px; }
.cueby-empty i { font-size: 2.2rem; display: block; margin-bottom: 8px; color: #bdbdbd; }
.cueby-alert { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: .86rem; margin-bottom: 12px; flex-wrap: wrap; }
.cueby-alert.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.cueby-alert.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.cueby-alert a { color: inherit; font-weight: 600; }

/* หน้า Cueby Studio: Nav หลักของเว็บไม่ลอยติดบน (header.js ใส่ .is-fixed ตอนเลื่อน) — ให้แถบของแอป
   (.cueby-top + .cueby-toolbar) ติดบนแทน จะได้มีพื้นที่เขียนบทมากขึ้น */
.cueby-body .header-nav-sticky.is-fixed { position: relative; box-shadow: none; }
/* Bootstrap ตั้ง :root { scroll-behavior: smooth } — CodeMirror สั่งเลื่อนแล้ววัดตำแหน่งทันที ถ้าเลื่อนแบบนุ่มนวล
   มันจะวัดกลางทางแล้วคำนวณซ้ำผิด (กดฉากแล้วไปจบกลางจอ / ใต้แถบ) → หน้านี้เลื่อนทันทีเสมอ */
html:has(> body.cueby-body) { scroll-behavior: auto !important; }

/* App shell
   --cueby-top-h / --cueby-bars-h = ความสูงจริงของแถบบน / แถบบน+แถบเครื่องมือ (cueby.js วัดด้วย ResizeObserver) */
.cueby-app { background: #ebebe6; min-height: calc(100vh - 60px); }
.cueby-top { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--cueby-line); display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-width: 0; }
.cueby-icon-btn { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--cueby-ink); text-decoration: none; flex-shrink: 0; }
.cueby-icon-btn:hover { background: #f3f4f6; color: var(--cueby-ink); }
.cueby-title-btn { border: 0; background: transparent; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 8px; }
.cueby-title-btn > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.cueby-title-btn .bi { font-size: .75rem; color: var(--cueby-muted); }
.cueby-title-btn:hover { background: #f3f4f6; }
.cueby-status { font-size: .76rem; color: var(--cueby-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cueby-status.synced .bi { color: #059669; }
.cueby-status.offline, .cueby-status.error { color: #b45309; }
.cueby-spin { display: inline-block; animation: cuebySpin 1s linear infinite; }
@keyframes cuebySpin { to { transform: rotate(360deg); } }
.cueby-presence { display: flex; align-items: center; margin-left: auto; }
.cueby-presence-label { font-size: .72rem; color: var(--cueby-muted); margin-left: 8px; white-space: nowrap; }
.cueby-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: .78rem; border: 2px solid #fff; margin-left: -6px; flex-shrink: 0; }
.cueby-avatar:first-child { margin-left: 0; }
.cueby-avatar.more { background: #9ca3af; }
.cueby-top-actions { display: flex; gap: 6px; align-items: center; }
.cueby-top-actions .btn.active { background: #111; color: #fff; }
/* ปุ่มแผงยุบเข้าเบอร์เกอร์บนจอเล็ก — AI / ตั้งค่า / ไฟล์ อยู่นอกเมนูตลอด */
.cueby-top-inline { display: contents; }
.cueby-top-actions .btn { white-space: nowrap; }
.cueby-top-burger { display: none; }
.cueby-top-burger .dropdown-item.active { background: #111; color: #fff; }
.cueby-file-menu { min-width: 250px; }
.cueby-file-menu .dropdown-header { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: 6px; padding-bottom: 2px; }
.cueby-file-menu .dropdown-item small { margin-left: 4px; }
.cueby-file-menu .dropdown-item.active { background: var(--bs-tertiary-bg); color: inherit; font-weight: 600; }
@media (max-width: 991px) {
  .cueby-top-actions .btn > span { display: none; }
  .cueby-presence-label { display: none; }
  .cueby-top-inline { display: none; }
  .cueby-top-burger { display: block; }
}
@media (max-width: 575px) {
  .cueby-top { gap: 6px; padding: 8px 10px; }
  .cueby-status span { display: none; }
  .cueby-title-btn > span:first-child { max-width: 40vw; }
  .cueby-title-btn .bi-pencil { display: none; }
  .cueby-top-actions { gap: 4px; }
}

.cueby-toolbar { position: sticky; top: var(--cueby-top-h, 51px); z-index: 25; background: #fafaf8; border-bottom: 1px solid var(--cueby-line); display: flex; align-items: center; gap: 10px; padding: 6px 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.cueby-toolbar::-webkit-scrollbar { display: none; }
.cueby-elems { display: flex; gap: 4px; flex-shrink: 0; }
.cueby-elem { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; color: #374151; white-space: nowrap; }
.cueby-elem:hover { background: #fff; border-color: var(--cueby-line); }
.cueby-elem.active { background: #111; color: #fff; }
.cueby-tools { display: flex; gap: 4px; flex-shrink: 0; align-items: center; padding-left: 8px; border-left: 1px solid var(--cueby-line); position: relative; }
.cueby-emph-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #111; color: #fff; font-size: .72rem; padding: 3px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.cueby-emph-hint.show { opacity: 1; }
.cueby-suggest { display: flex; gap: 4px; flex-shrink: 0; }
.cueby-chip { border: 1px dashed #d1d5db; background: #fff; border-radius: 999px; font-size: .74rem; padding: 3px 10px; white-space: nowrap; color: #374151; }
.cueby-chip:hover { border-style: solid; border-color: #111; }
.cueby-chip.on { border-style: solid; border-color: #111; background: #111; color: #fff; }
.cueby-hint { margin-left: auto; font-size: .72rem; color: var(--cueby-muted); white-space: nowrap; }
/* ป้าย "AI เดาบทปิดอยู่" บนแถบเครื่องมือ — สีอำพัน + ไอคอนหยุด ให้ต่างจากสีม่วงของ AI ที่ทำงานอยู่ */
.cueby-ac-off { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border: 1px solid #fcd34d; border-radius: 999px; background: #fffbeb; color: #92400e; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.cueby-ac-off .bi { color: #f59e0b; font-size: .9rem; }
.cueby-ac-off:hover { background: #fef3c7; border-color: #f59e0b; }
.cueby-ac-off + .cueby-hint { margin-left: 0; }
/* เงื่อนไข AI ต่อบท (askAiConsent) */
.cueby-consent p { margin-bottom: 8px; }
.cueby-consent-priv { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cueby-line); border-radius: 10px; cursor: pointer; }
.cueby-consent-priv span { display: flex; flex-direction: column; flex: 1; }
.cueby-consent-priv small { color: var(--cueby-muted); }
.cueby-consent-priv .cueby-sw { order: 2; }
.cueby-ai-consent { display: flex; gap: 10px; padding: 12px; margin-bottom: 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d; }
.cueby-ai-consent > .bi { color: #b45309; font-size: 1.3rem; }
.cueby-ai-consent > div { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.cueby-ai-consent span { color: #78350f; }
.cueby-ai-consent .btn { align-self: flex-start; margin-top: 4px; }
.cueby-privacy.risk { color: #b91c1c; }
.cueby-privacy.safe { color: #047857; }
.cueby-hint kbd, .cueby-help kbd { font-size: .7rem; background: #fff; color: #111; border: 1px solid #d1d5db; box-shadow: 0 1px 0 #d1d5db; padding: 1px 5px; }
.cueby-ro-note { font-size: .8rem; color: var(--cueby-muted); }

.cueby-main { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: start; }
.cueby-side { position: sticky; top: var(--cueby-bars-h, 96px); max-height: calc(100vh - var(--cueby-bars-h, 96px)); overflow-y: auto; padding: 14px 10px 24px 14px; font-size: .8rem; }
.cueby-side-sec { margin-bottom: 18px; }
.cueby-side-h { font-size: .68rem; font-weight: 700; color: var(--cueby-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.cueby-scenes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.cueby-scenes li { display: flex; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; line-height: 1.3; }
.cueby-scenes li:hover { background: rgba(255,255,255,.7); }
.cueby-scenes li.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cueby-sn { font-weight: 700; color: var(--cueby-muted); min-width: 1.6em; }
.cueby-sh { text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cueby-chars { list-style: none; padding: 0; margin: 0; }
.cueby-chars li { display: flex; justify-content: space-between; padding: 3px 6px; }
.cueby-chars small { color: var(--cueby-muted); }
.cueby-side-empty { color: var(--cueby-muted); cursor: default !important; }
.cueby-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cueby-stats > div { background: #fff; border-radius: 8px; padding: 6px; text-align: center; }
.cueby-stats strong { display: block; font-size: .95rem; }
.cueby-stats span { font-size: .66rem; color: var(--cueby-muted); }

/* Paper + screenplay formatting */
.cueby-paper-wrap { padding: 24px 16px 120px; display: flex; justify-content: center; min-width: 0; }
/* --cz = ระดับซูมกระดาษ (ปุ่ม − / + มุมขวาล่าง) — ตัวอักษรและระยะขอบขยายตามกัน ระยะเยื้องเป็น ch จึงตามขนาดตัวอักษรเอง */
.cueby-paper { --cz: 1; background: #fff; width: 100%; max-width: calc(61ch + 2.5in * var(--cz)); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 20px 50px -24px rgba(0,0,0,.25); font-family: var(--cueby-font); font-size: calc(12pt * var(--cz)); min-height: 80vh; }
.cueby-paper .cm-editor { outline: none; min-height: 80vh; }
/* แถบลัดลอยใต้เคอร์เซอร์ — ชนิดบรรทัดที่แนะนำ (ขอบดำ) + คำแนะนำ; เลื่อนได้แค่ซ้าย-ขวาเมื่อจอแคบ */
.cueby-paper { position: relative; }
.cueby-qbar { position: absolute; z-index: 20; max-width: calc(100% - 16px); background: #fff; border: 1px solid var(--cueby-line); border-radius: 12px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.25); padding: 6px; display: flex; flex-direction: column; gap: 6px; font-family: "Noto Sans Thai", system-ui, sans-serif; animation: cueby-qbar-in .12s ease-out; }
.cueby-qbar[hidden] { display: none; }
.cueby-qbar-row { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.cueby-qbar-row::-webkit-scrollbar { display: none; }
.cueby-qbtn { flex-shrink: 0; border: 1px solid transparent; background: #f3f4f6; border-radius: 8px; padding: 6px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; color: #374151; white-space: nowrap; min-height: 34px; }
.cueby-qbtn:hover { border-color: #111; }
.cueby-qbtn.rec { background: #fff; border-color: #111; color: #111; font-weight: 600; }
.cueby-qbtn.active { background: #111; color: #fff; }
.cueby-qbtn.cueby-qoff { position: sticky; right: 0; margin-left: auto; background: #fff; color: #6b7280; padding: 6px 9px; box-shadow: -8px 0 8px -4px #fff; }
.cueby-qbtn.cueby-qoff:hover { color: #111; }
.cueby-qbar .cueby-chip { flex-shrink: 0; min-height: 30px; }
@keyframes cueby-qbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cueby-qbar { animation: none; } }
.cueby-paper .cm-scroller { font-family: var(--cueby-font); line-height: 1.5; overflow: visible; }
.cueby-paper .cm-content { padding: calc(1in * var(--cz)) calc(1in * var(--cz)) calc(1in * var(--cz)) calc(1.5in * var(--cz)); caret-color: #111; }
.cueby-paper .cm-line { padding: 0; }
.cueby-paper .cm-placeholder { color: #9ca3af; font-style: italic; white-space: pre-wrap; }
@media (max-width: 767px) {
  .cueby-paper .cm-content { padding: 28px 18px 60px; }
  .cueby-paper { font-size: calc(11pt * var(--cz)); }
}
.cueby-l-scene { font-weight: 700; text-transform: uppercase; position: relative; }
/* เลขฉากที่ขอบกระดาษ — ซ้ายในระยะขอบ 1.5" ขวาในระยะขอบ 1" (ตำแหน่งเดียวกับตอนพิมพ์ PDF) */
.cueby-l-scene[data-sn]::before, .cueby-l-scene[data-sn]::after {
  content: attr(data-sn); position: absolute; top: 0; font-weight: 700; color: #6b7280;
  pointer-events: none; user-select: none;
}
.cueby-l-scene[data-sn]::before { left: -9ch; }
.cueby-l-scene[data-sn]::after { right: -7ch; }
.cueby-l-character { padding-left: 22ch !important; text-transform: uppercase; }
.cueby-l-dialogue { padding-left: 10ch !important; padding-right: 16ch !important; }
.cueby-l-paren { padding-left: 16ch !important; padding-right: 20ch !important; }
.cueby-l-transition { text-align: right; text-transform: uppercase; }
.cueby-l-centered { text-align: center; }
.cueby-l-lyric { padding-left: 10ch !important; font-style: italic; }
.cueby-l-section { color: #1d4ed8; font-family: "Noto Sans Thai", system-ui, sans-serif; font-weight: 700; }
.cueby-l-synopsis { color: #047857; font-family: "Noto Sans Thai", system-ui, sans-serif; font-style: italic; }
.cueby-l-note, .cueby-l-boneyard { color: #9ca3af; }
.cueby-l-pagebreak { color: #9ca3af; text-align: center; }
.cueby-l-title { color: #4b5563; font-family: "Noto Sans Thai", system-ui, sans-serif; font-size: .92em; }
@media (max-width: 767px) {
  /* ขอบกระดาษแคบ — แสดงเลขฉากด้านหน้าแทนการลอยในขอบ */
  .cueby-l-scene[data-sn]::before { position: static; margin-right: 1ch; }
  .cueby-l-scene[data-sn]::after { display: none; }
  .cueby-l-character { padding-left: 30% !important; }
  .cueby-l-dialogue { padding-left: 12% !important; padding-right: 12% !important; }
  .cueby-l-paren { padding-left: 20% !important; padding-right: 18% !important; }
}
.cueby-mk { color: #c4c4c4; }
/* ตัวเน้น Fountain แสดงผลจริงในตัวแก้ไข (เครื่องหมายยังเห็นจาง ๆ) + โน้ตถึงทีมเป็นไฮไลต์ */
.cueby-em-b { font-weight: 700; }
.cueby-em-i { font-style: italic; }
.cueby-em-u { text-decoration: underline; text-underline-offset: 3px; }
.cueby-note-in { background: #fef3c7; color: #92400e; border-radius: 3px; font-family: "Noto Sans Thai", system-ui, sans-serif; font-size: .9em; }
.cueby-note-in .cueby-mk { color: #d6a85a; }
.cueby-paper .cm-ySelectionInfo { font-family: "Noto Sans Thai", system-ui, sans-serif; font-size: 11px; padding: 1px 5px; border-radius: 4px 4px 4px 0; opacity: 1 !important; }
.cueby-paper .cm-panels { font-family: "Noto Sans Thai", system-ui, sans-serif; font-size: .85rem; }
.cueby-ro .cm-content { caret-color: transparent; }

/* Right panel */
.cueby-panel { position: sticky; top: calc(var(--cueby-bars-h, 96px) + 16px); width: 340px; max-height: calc(90vh - var(--cueby-bars-h, 96px) - 32px); overflow-y: auto; margin: 16px 14px 16px 0; background: #fff; border: 1px solid var(--cueby-line); border-radius: 12px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.25); font-size: .86rem; }
.cueby-panel-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--cueby-line); position: sticky; top: 0; background: #fff; z-index: 1; }
.cueby-panel-b { padding: 14px 16px 18px; }
/* แผงคู่มือเนื้อหายาว — ไม่ยืดเต็มความสูงจอ เลื่อนอ่านในกรอบแทน (จอเล็กใช้ bottom sheet 70vh ตามเดิม) */
.cueby-panel[data-name="guide"] { max-height: min(70vh, 640px); }
/* AI — เครดิตบนแถบบน */
.cueby-credit { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cueby-line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 600; color: #111; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cueby-credit .bi { color: #7c3aed; }
.cueby-credit:hover { border-color: #111; }
.cueby-credit.off { color: var(--cueby-muted); border-style: dashed; font-weight: 500; }
.cueby-credit.off .bi { color: var(--cueby-muted); }
.cueby-credit.low { color: #b45309; border-color: #f59e0b; background: #fffbeb; }
.cueby-credit.err { color: #b91c1c; border-color: #fca5a5; }
.cueby-actions .cueby-credit, .cueby-actions .cueby-icon-btn { align-self: center; }
@media (max-width: 575px) { .cueby-credit { padding: 4px 8px; } .cueby-top-actions .dropdown-toggle::after { display: none; } }

/* AI — หน้าต่างตั้งค่า */
.cueby-set { text-align: left; font-size: .88rem; }
.cueby-set-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cueby-muted); margin: 4px 0 8px; }
.cueby-set-h:not(:first-child) { margin-top: 18px; }
.cueby-set-conn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: .82rem; }
.cueby-set-conn > span { flex: 1; min-width: 0; }
.cueby-set-conn .bi-check-circle-fill { color: #16a34a; }
.cueby-set-conn.off { background: #f9fafb; border-color: var(--cueby-line); }
.cueby-set-card { border: 1px solid var(--cueby-line); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.cueby-set-top { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 0; cursor: pointer; }
.cueby-set-top > .bi { font-size: 1rem; color: #7c3aed; flex-shrink: 0; }
.cueby-set-top > span { flex: 1; min-width: 0; }
.cueby-set-top b { display: block; font-weight: 600; }
.cueby-set-top small { display: block; color: var(--cueby-muted); font-size: .76rem; line-height: 1.4; }
.cueby-set-top small kbd { font-size: .68rem; background: #f3f4f6; color: #111; border: 1px solid #d1d5db; padding: 0 4px; }
.cueby-set-top small code { color: #047857; background: #ecfdf5; padding: 0 3px; border-radius: 4px; }
.cueby-set-body { border-top: 1px dashed var(--cueby-line); padding: 8px 12px 10px 38px; display: grid; gap: 8px; }
.cueby-set-card.off .cueby-set-body { display: none; }
.cueby-set-card.off .cueby-set-top > .bi { color: var(--cueby-muted); }
.cueby-set-sub { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-size: .82rem; }
.cueby-set-sub > span { flex: 1; }
.cueby-set-model { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; }
.cueby-set-model label { font-size: .82rem; margin: 0; }
.cueby-set-model small { grid-column: 2; font-size: .72rem; color: var(--cueby-muted); min-height: 1em; }
.cueby-set-note { font-size: .72rem; color: var(--cueby-muted); margin: 12px 0 0; }
/* สวิตช์เปิด/ปิด */
.cueby-sw { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 36px; height: 20px; border-radius: 999px; background: #d1d5db; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.cueby-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.cueby-sw:checked { background: #111; }
.cueby-sw:checked::after { transform: translateX(16px); }
.cueby-sw:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.cueby-set-sub .cueby-sw { width: 30px; height: 17px; }
.cueby-set-sub .cueby-sw::after { width: 13px; height: 13px; }
.cueby-set-sub .cueby-sw:checked::after { transform: translateX(13px); }

/* AI — ข้อความที่เดาไว้ (จาง ๆ หลังเคอร์เซอร์) */
.cueby-ghost { color: #9ca3af; white-space: pre-wrap; cursor: pointer; }
.cueby-ghost-k { display: inline-block; margin-left: 6px; font-family: "Noto Sans Thai", system-ui, sans-serif; font-size: .62rem; font-style: normal; font-weight: 600; line-height: 1; color: #6b7280; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 5px; vertical-align: 2px; background: #fff; user-select: none; }

/* AI — บรรทัดที่น่าจะผิดรูปแบบ */
.cueby-paper .cueby-ai-flag { text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cueby-paper .cueby-ai-error { text-decoration-color: #dc2626; }
.cueby-paper .cueby-ai-warn { text-decoration-color: #f59e0b; }
.cueby-paper .cueby-ai-hint { text-decoration-color: #60a5fa; text-decoration-style: dotted; }

/* AI — ปุ่มบนแถบเครื่องมือ + แผงผลตรวจ */
.cueby-ai-btn .bi { color: #7c3aed; }
.cueby-ai-btn.active .bi { color: #c4b5fd; }
.cueby-credit.active { background: #111; border-color: #111; color: #fff; }
.cueby-credit .cueby-ai-badge { margin-left: 2px; }
.cueby-ai-badge { background: #dc2626; color: #fff; border-radius: 999px; font-size: .64rem; font-weight: 700; min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.cueby-ai-badge[hidden] { display: none; }
.cueby-ai-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cueby-ai-sec { padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--cueby-line); }
.cueby-ai-sec-h { font-weight: 700; font-size: .84rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cueby-ai-meta code { color: #047857; background: #ecfdf5; padding: 0 4px; border-radius: 4px; }
.cueby-ai-meta { font-size: .76rem; color: var(--cueby-muted); margin: 8px 0 10px; }
.cueby-ai-progress { font-size: .8rem; background: #f9fafb; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.cueby-ai-progress[hidden] { display: none; }
.cueby-ai-sum { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-weight: 600; }
.cueby-ai-sum > span { margin-right: auto; }
.cueby-ai-item { border: 1px solid var(--cueby-line); border-left-width: 3px; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.cueby-ai-item.error { border-left-color: #dc2626; }
.cueby-ai-item.warn { border-left-color: #f59e0b; }
.cueby-ai-item.hint { border-left-color: #60a5fa; }
.cueby-ai-item-h { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #4b5563; }
.cueby-ai-item.error .cueby-ai-item-h .bi { color: #dc2626; }
.cueby-ai-item.warn .cueby-ai-item-h .bi { color: #f59e0b; }
.cueby-ai-item.hint .cueby-ai-item-h .bi { color: #60a5fa; }
.cueby-ai-goto { margin-left: auto; border: 0; background: none; padding: 0; font-size: .74rem; color: #2563eb; text-decoration: underline; }
.cueby-ai-msg { font-size: .82rem; margin: 4px 0 6px; }
.cueby-ai-diff { font-family: var(--cueby-font); font-size: .76rem; background: #f9fafb; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cueby-ai-diff del { display: block; color: #b91c1c; text-decoration: line-through; }
.cueby-ai-diff ins { display: block; color: #15803d; text-decoration: none; }
.cueby-ai-nl { color: #9ca3af; }
.cueby-ai-btns { display: flex; gap: 6px; }

/* คู่มือเขียนบท */
.cueby-g-sec { border-bottom: 1px solid var(--cueby-line); }
.cueby-g-sec > summary { cursor: pointer; padding: 10px 0; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.cueby-g-sec > summary::-webkit-details-marker { display: none; }
.cueby-g-sec > summary::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; font-size: .75rem; color: var(--cueby-muted); transition: transform .15s; }
.cueby-g-sec[open] > summary::after { transform: rotate(180deg); }
.cueby-g-body { padding: 0 0 14px; }
.cueby-g-body ul { padding-left: 18px; margin-bottom: 8px; }
.cueby-g-body li { margin-bottom: 4px; }
.cueby-g-body code { color: #111; background: #f3f4f6; padding: 0 4px; border-radius: 4px; font-size: .92em; }
.cueby-g-table { width: 100%; font-size: .8rem; margin-bottom: 8px; border-collapse: collapse; }
.cueby-g-table th { font-weight: 600; color: var(--cueby-muted); text-align: left; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--cueby-line); }
.cueby-g-table td { padding: 6px 6px 6px 0; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.cueby-g-table td:first-child { white-space: nowrap; }
.cueby-g-page { font-family: var(--cueby-font); font-size: .78rem; line-height: 1.5; background: #fff; border: 1px solid var(--cueby-line); border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow-wrap: anywhere; }
.cueby-g-page .cueby-l-character { padding-left: 34% !important; }
.cueby-g-page .cueby-l-dialogue { padding-left: 16% !important; padding-right: 12% !important; }
.cueby-g-page .cueby-l-paren { padding-left: 24% !important; padding-right: 18% !important; }
.cueby-g-ex-h { font-size: .82rem; font-weight: 700; margin: 14px 0 6px; }
.cueby-g-notes { font-size: .78rem; color: #4b5563; }
.cueby-member { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #f3f4f6; }
.cueby-member .cueby-avatar { margin-left: 0; }
.cueby-member-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cueby-member-n small { color: var(--cueby-muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }
.cueby-member select { width: auto; }
.cueby-members { margin-top: 16px; }
.cueby-links-sec { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cueby-line); }
.cueby-links-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cueby-link { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid #f3f4f6; }
.cueby-link-ic { color: var(--cueby-muted); width: 18px; text-align: center; }
.cueby-link .cueby-member-n strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cueby-link-pin { font-family: ui-monospace, monospace; font-size: 1.6rem; letter-spacing: .4em; font-weight: 700; text-align: center; background: #f3f4f6; border-radius: 8px; padding: 6px 0; }
.cueby-ver { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid #f3f4f6; }
.cueby-ver > div:first-child { min-width: 0; display: flex; flex-direction: column; }
.cueby-ver small { color: var(--cueby-muted); font-size: .72rem; }
.cueby-ver-a { display: flex; gap: 4px; flex-shrink: 0; }
.cueby-ver-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--cueby-muted); padding-bottom: 8px; }
.cueby-ver-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: 8px; background: #f9fafb; border-radius: 8px; }
.cueby-ver-bar [data-ver-delsel] { margin-left: auto; }
.cueby-ver-cb { flex-shrink: 0; margin: 0; }
.cueby-ver:has(.cueby-ver-cb) { justify-content: flex-start; gap: 10px; }
.cueby-ver.selected { background: #fef2f2; }
/* ส่งเข้า BreXus — Modal กลางจอ: ตารางฉากซ้าย · ฟอร์มขวา (จอแคบเรียงบนลงล่าง) */
.cueby-bx-modal { font-family: "Noto Sans Thai", system-ui, sans-serif; color: var(--cueby-ink); }
.cueby-bx-modal .modal-content { border-radius: 16px; }
.cueby-bx-modal .btn { border-radius: 8px; }
.cueby-bx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .cueby-bx-grid { grid-template-columns: minmax(0, 1fr); } }
.cueby-bx-preview { background: #fafaf8; border: 1px solid var(--cueby-line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.cueby-bx-preview-h { font-size: .86rem; margin-bottom: 8px; }
.cueby-bx-table { max-height: min(56vh, 520px); overflow: auto; }
.cueby-bx-table table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.cueby-bx-table th { position: sticky; top: 0; background: #fafaf8; text-align: left; font-weight: 600; color: var(--cueby-muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--cueby-line); white-space: nowrap; }
.cueby-bx-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0ec; vertical-align: top; }
.cueby-bx-table td small { display: block; color: var(--cueby-muted); }
.cueby-bx-n { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-weight: 600; white-space: nowrap; cursor: help; }
@media (max-width: 575px) {
  .cueby-bx-table { max-height: 40vh; }
  .cueby-bx-table th:nth-child(5), .cueby-bx-table td:nth-child(5), .cueby-bx-table .cueby-bx-sn { display: none; }
}
/* ส่งเข้า BreXus: แบบปกติ / ใช้ AI วิเคราะห์ */
.cueby-bx-mode { display: grid; gap: 6px; margin-top: 12px; }
.cueby-bx-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--cueby-line); border-radius: 10px; cursor: pointer; margin: 0; }
.cueby-bx-opt input { margin-top: 4px; flex-shrink: 0; }
.cueby-bx-opt b { display: block; font-size: .82rem; }
.cueby-bx-opt b .bi { color: #7c3aed; }
.cueby-bx-opt small { display: block; font-size: .74rem; color: var(--cueby-muted); line-height: 1.45; }
.cueby-bx-opt:has(input:checked) { border-color: #111; background: #fafaf8; }
.cueby-bx-ai { padding: 4px 2px 0; }
.cueby-bx-ai[hidden] { display: none; }
@media (max-width: 1199px) {
  .cueby-main { grid-template-columns: minmax(0, 1fr); }
  .cueby-side { display: none; }
  .cueby-panel { position: fixed; top: auto; bottom: 0; right: 0; left: 0; width: auto; max-height: 70vh; margin: 0; border-radius: 16px 16px 0 0; z-index: 40; }
}
@media (min-width: 1200px) and (max-width: 1399px) { .cueby-main { grid-template-columns: 200px minmax(0, 1fr) auto; } }

/* ปุ่มวิธีใช้ลอยมุมขวาล่าง + แผงคีย์ลัด (Ctrl/⌘+I เปิด/ปิด) */
.cueby-help-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: #111; color: #fbbf24; font-size: 1.35rem; display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); transition: transform .15s, background .15s;
}
.cueby-help-fab:hover { transform: translateY(-2px); }
.cueby-help-fab.active { background: #fbbf24; color: #111; }
.cueby-help-fab:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.cueby-help-pop {
  position: fixed; right: 20px; bottom: 80px; z-index: 45;
  width: min(460px, calc(100vw - 32px)); max-height: min(70vh, 640px);
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cueby-line);
  border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); overflow: hidden;
  animation: cuebyPop .14s ease-out;
}
.cueby-help-pop[hidden] { display: none; }
@keyframes cuebyPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cueby-help-pop { animation: none; } .cueby-help-fab { transition: none; } }
.cueby-help-pop-h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--cueby-line); font-size: .9rem; }
.cueby-help-pop-h strong { margin-right: auto; }
.cueby-help-pop-k { font-size: .7rem; color: var(--cueby-muted); white-space: nowrap; }
.cueby-help-pop-k kbd { background: #f3f4f6; color: #111; border: 1px solid #d1d5db; box-shadow: 0 1px 0 #d1d5db; font-size: .68rem; padding: 1px 5px; }
.cueby-help-pop-b { overflow-y: auto; padding: 4px 16px 16px; }
.cueby-help-pop-b .cueby-help h6:first-child { margin-top: 10px; }
/* ซูมกระดาษ — อยู่ข้างปุ่มวิธีใช้ */
.cueby-zoom {
  position: fixed; right: 80px; bottom: 26px; z-index: 45; display: flex; align-items: center;
  background: #fff; border: 1px solid var(--cueby-line); border-radius: 999px; padding: 3px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); font-family: "Noto Sans Thai", system-ui, sans-serif;
}
.cueby-zoom button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #111; display: grid; place-items: center; padding: 0; font-size: 1rem; }
.cueby-zoom button:hover:not(:disabled) { background: #f3f4f6; }
.cueby-zoom button:disabled { color: #d1d5db; }
.cueby-zoom button:focus-visible { outline: 2px solid #111; outline-offset: 1px; }
.cueby-zoom-v { min-width: 3.4em; text-align: center; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #374151; border: 0; background: none; padding: 0; cursor: pointer; }
@media (max-width: 575px) {
  .cueby-zoom { right: 66px; bottom: 18px; }
  .cueby-help-fab { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .cueby-help-pop { right: 16px; bottom: 68px; }
  .cueby-help-pop-k { display: none; }
}
/* Bubble แนะนำคีย์ลัด — ลอยเหนือปุ่ม ? ลูกศรชี้ลงหาปุ่ม */
.cueby-help-tip {
  position: fixed; right: 20px; bottom: 82px; z-index: 46; max-width: min(320px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 14px;
  background: #111; color: #fff; border-radius: 12px; font-size: .84rem; line-height: 1.35;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); animation: cuebyTip .2s ease-out;
}
.cueby-help-tip[hidden] { display: none; }
.cueby-help-tip::after { content: ""; position: absolute; right: 18px; bottom: -6px; width: 12px; height: 12px; background: #111; transform: rotate(45deg); border-radius: 2px; }
.cueby-help-tip > .bi { color: #fbbf24; font-size: 1rem; }
.cueby-help-tip kbd { background: #fbbf24; color: #111; border: 0; font-weight: 700; font-size: .78rem; padding: 1px 6px; box-shadow: none; }
.cueby-help-tip-x { border: 0; background: transparent; color: rgba(255,255,255,.6); width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
.cueby-help-tip-x:hover { color: #fff; background: rgba(255,255,255,.12); }
@keyframes cuebyTip { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cueby-help-tip { animation: none; } }
@media (max-width: 575px) { .cueby-help-tip { right: 14px; bottom: 70px; } .cueby-help-tip::after { right: 16px; } }

/* แจ้งเตือนสั้น ๆ (คีย์ลัดเปิด/ปิด) — อยู่เหนือ Swal */
.cueby-flash {
  position: fixed; left: 50%; bottom: 28px; z-index: 2000; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: #111; color: #fff; font-size: .86rem; font-weight: 600; box-shadow: 0 12px 28px -10px rgba(0,0,0,.5);
  transition: opacity .15s ease, transform .15s ease;
}
.cueby-flash.show { opacity: 1; transform: translate(-50%, 0); }
.cueby-flash .bi { color: #a78bfa; }
.cueby-flash.off .bi { color: #9ca3af; }
@media (prefers-reduced-motion: reduce) { .cueby-flash { transition: none; } }

/* ทัวร์แนะนำเครื่องมือ — กรอบไฮไลต์ (เงารอบนอกทำให้ส่วนอื่นมืด) + การ์ดคำอธิบาย */
.cueby-tour { position: fixed; inset: 0; z-index: 1060; }
.cueby-tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px #fbbf24, 0 0 0 9999px rgba(17, 17, 17, .55);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.cueby-tour-card {
  position: fixed; width: min(340px, calc(100vw - 16px)); background: #fff; border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); font-size: .86rem; animation: cuebyTip .2s ease-out;
  transition: top .2s ease, left .2s ease;
}
.cueby-tour-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cueby-tour-h .bi { color: #7c3aed; font-size: 1.05rem; }
.cueby-tour-h b { flex: 1; font-size: .95rem; }
.cueby-tour-h span { font-size: .72rem; color: var(--cueby-muted); font-variant-numeric: tabular-nums; }
.cueby-tour-card p { margin: 0 0 12px; color: #374151; line-height: 1.55; }
.cueby-tour-card kbd { font-size: .72rem; background: #f3f4f6; color: #111; border: 1px solid #d1d5db; padding: 0 5px; box-shadow: none; }
.cueby-tour-card code { color: #047857; background: #ecfdf5; padding: 0 4px; border-radius: 4px; }
.cueby-tour-f { display: flex; align-items: center; gap: 6px; }
.cueby-tour-skip { margin-right: auto; border: 0; background: none; padding: 0; font-size: .78rem; color: var(--cueby-muted); }
.cueby-tour-skip:hover { color: #111; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .cueby-tour-spot, .cueby-tour-card { transition: none; animation: none; } }

/* แผงด้านข้างเป็น bottom sheet บนจอเล็ก — ซ่อนปุ่ม/แผง/bubble วิธีใช้ไม่ให้ทับ */
@media (max-width: 1199px) {
  .cueby-app:has(.cueby-panel:not([hidden])) .cueby-help-fab,
  .cueby-app:has(.cueby-panel:not([hidden])) .cueby-zoom,
  .cueby-app:has(.cueby-panel:not([hidden])) .cueby-help-tip,
  .cueby-app:has(.cueby-panel:not([hidden])) .cueby-help-pop { display: none; }
}

/* Help / preview (ใน SweetAlert) */
.cueby-help h6 { font-weight: 700; margin: 14px 0 6px; }
.cueby-help table { width: 100%; font-size: .84rem; }
.cueby-help td { padding: 4px 6px; vertical-align: top; border-top: 1px solid #f3f4f6; }
.cueby-help td:first-child { white-space: nowrap; width: 1%; }
.cueby-help-tips { font-size: .84rem; padding-left: 18px; margin-bottom: 10px; }
.cueby-help-tips li { margin-bottom: 4px; }
.cueby-help-tips code { color: #047857; background: #ecfdf5; padding: 0 4px; border-radius: 4px; }
.cueby-preview { max-height: 65vh; overflow-y: auto; text-align: left; background: #fff; border: 1px solid var(--cueby-line); padding: 24px; }

/* Screenplay pages (พิมพ์ / ดูเวอร์ชัน) */
.cueby-print { display: none; }
.cueby-preview, .cueby-print { font-family: var(--cueby-font); font-size: 12pt; line-height: 1.2; color: #000; }
.pp-body > div { white-space: pre-wrap; word-wrap: break-word; margin: 0; }
.pp-scene { font-weight: 700; text-transform: uppercase; margin-top: 2em !important; position: relative; break-after: avoid; }
.pp-action { margin-top: 1.2em !important; }
.pp-char { padding-left: 22ch; margin-top: 1.2em !important; text-transform: uppercase; break-after: avoid; }
.pp-dlg { padding-left: 10ch; padding-right: 16ch; }
.pp-paren { padding-left: 16ch; padding-right: 20ch; break-after: avoid; }
.pp-trans { text-align: right; text-transform: uppercase; margin-top: 1.2em !important; }
.pp-center { text-align: center; margin-top: 1.2em !important; }
.pp-lyric { padding-left: 10ch; font-style: italic; }
.pp-break { break-after: page; }
.pp-sn { position: absolute; left: -7ch; font-weight: 700; }
.pp-sn-r { left: auto; right: -6ch; }
.pp-title { height: 9in; display: flex; flex-direction: column; text-align: center; break-after: page; padding-top: 3.2in; }
.cueby-preview .pp-title { height: auto; padding: 24px 0; border-bottom: 1px dashed #ddd; margin-bottom: 24px; }
.pp-title-main { font-weight: 700; text-transform: uppercase; font-size: 1.15em; text-decoration: underline; margin-bottom: 2em; }
.pp-title-line { margin-bottom: .8em; }
.pp-title-foot { margin-top: auto; text-align: left; font-size: .95em; }

/* หน้ากระดาษที่จัดหน้าแล้ว (CuebyFountain.paginate) — ขอบเป็น padding ของหน้าเอง (@page margin = 0)
   เพราะเบราว์เซอร์ไม่พิมพ์สิ่งที่อยู่ในขอบ @page → เลขฉาก / เลขหน้าในขอบจะได้ไม่ถูกตัด */
.cueby-print-stage { display: block !important; position: fixed; left: -30000px; top: 0; visibility: hidden; }
.pp-page { box-sizing: border-box; padding: 1in 1in 1in 1.5in; position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; break-after: page; }
.pp-page:last-child { break-after: auto; }
.pp-page > .pp-body { flex: 1 1 auto; min-height: 0; overflow: visible; } /* visible — ไม่งั้นเลขฉากในขอบถูกตัด (วัดล้นหน้าด้วย scrollHeight ได้ตามปกติ) */
.pp-page > .pp-body > :first-child { margin-top: 0 !important; }
.pp-pnum { position: absolute; top: .5in; right: 1in; }
.pp-page-title .pp-title { height: 100%; padding-top: 2.4in; break-after: auto; }

@media print {
  body.cueby-printing > *:not(#cueby-print) { display: none !important; }
  body.cueby-printing { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.cueby-printing #cueby-print { display: block; }
}

/* แท็ก Breakdown — สีต่อชนิด (ไฮไลต์ในบท / ชิปในแผงฉาก / เมนูแท็ก) */
.cueby-tag-props { --tag: #7c3aed; }
.cueby-tag-set_dressing { --tag: #a16207; }
.cueby-tag-costume { --tag: #db2777; }
.cueby-tag-makeup_hair { --tag: #ea580c; }
.cueby-tag-extras { --tag: #16a34a; }
.cueby-tag-livestock { --tag: #0891b2; }
.cueby-tag-special_requirement { --tag: #dc2626; }
.cueby-paper .cueby-tag { border-bottom: 2px solid var(--tag); background: color-mix(in srgb, var(--tag) 12%, transparent); border-radius: 2px; }
.cueby-tag-ic-props { color: #7c3aed; } .cueby-tag-ic-set_dressing { color: #a16207; } .cueby-tag-ic-costume { color: #db2777; }
.cueby-tag-ic-makeup_hair { color: #ea580c; } .cueby-tag-ic-extras { color: #16a34a; } .cueby-tag-ic-livestock { color: #0891b2; }
.cueby-tag-ic-special_requirement { color: #dc2626; }
@media print { .cueby-paper .cueby-tag { border: 0; background: none; } }

.cueby-tag-menu { position: fixed; z-index: 1070; min-width: 220px; background: #fff; border: 1px solid var(--cueby-line); border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); padding: 6px; }
.cueby-tag-menu-h { font-size: .72rem; color: var(--cueby-muted); padding: 4px 8px 6px; }
.cueby-tag-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 7px; font-size: .84rem; text-align: left; }
.cueby-tag-menu button:hover { background: #f3f4f6; }

/* แผงรายละเอียดฉาก */
.cueby-sd-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; font-size: .9rem; }
.cueby-sd-no { flex-shrink: 0; min-width: 28px; text-align: center; font-weight: 700; font-size: .74rem; background: #111; color: #fff; border-radius: 6px; padding: 2px 6px; }
.cueby-sd-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px; background: #fafaf8; border-radius: 10px; margin-bottom: 12px; font-size: .82rem; }
.cueby-sd-meta small { display: block; font-size: .7rem; color: var(--cueby-muted); }
.cueby-sd-meta > div:last-child { grid-column: 1 / -1; }
.cueby-sd-sec { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--cueby-line); }
.cueby-sd-h { font-weight: 700; font-size: .84rem; margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.cueby-sd-sub { font-size: .74rem; color: #4b5563; font-weight: 600; margin: 8px 0 4px; }
.cueby-sd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cueby-sd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; padding: 2px 9px; border-radius: 999px; background: #f3f4f6; }
.cueby-sd-chip.mention { background: #fef3c7; color: #92400e; }
.cueby-sd-chip.tag { background: color-mix(in srgb, var(--tag) 12%, #fff); color: var(--tag); border: 1px solid color-mix(in srgb, var(--tag) 35%, #fff); }
.cueby-sd-chip.tag a { color: inherit; text-decoration: none; }
.cueby-sd-n { font-size: .68rem; opacity: .75; font-weight: 600; }
.cueby-sd-chip button { border: 0; background: none; padding: 0 0 0 2px; line-height: 1; color: inherit; opacity: .6; font-size: .9rem; }
.cueby-sd-chip button:hover { opacity: 1; }
.cueby-sd-hidden { font-size: .72rem; color: var(--cueby-muted); margin-top: 6px; }
.cueby-sd-hidden button { border: 0; background: none; padding: 0; color: #2563eb; text-decoration: underline; font-size: inherit; }

/* ภาพรวมเรื่องสำหรับ AI (พล็อต + ตัวละคร) */
.cueby-story { text-align: left; font-size: .86rem; }
.cueby-story-l { display: block; font-weight: 700; margin-bottom: 4px; }
.cueby-story-l span { font-weight: 400; color: var(--cueby-muted); font-size: .78rem; }
.cueby-story-n { display: block; text-align: right; font-size: .72rem; color: var(--cueby-muted); margin-top: 2px; }
#cuebyStoryChars { max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.cueby-story-char { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 6px 0; border-top: 1px solid var(--cueby-line); }
.cueby-story-char > b { padding-top: 5px; font-size: .84rem; overflow-wrap: anywhere; }
@media (max-width: 575px) { .cueby-story-char { grid-template-columns: 1fr; } }
.cueby-story-note { font-size: .72rem; color: var(--cueby-muted); margin: 10px 0 0; }

/* เมนูคลิกขวาบนกระดาษ */
.cueby-ctx-menu { position: fixed; z-index: 1070; min-width: 230px; max-height: calc(100vh - 16px); overflow-y: auto; background: #fff; border: 1px solid var(--cueby-line); border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); padding: 5px; font-size: .84rem; }
.cueby-ctx-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 7px; text-align: left; color: #111; }
.cueby-ctx-menu button:hover:not(:disabled) { background: #f3f4f6; }
.cueby-ctx-menu button:disabled { color: #b8bcc4; }
.cueby-ctx-menu button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cueby-ctx-menu kbd { font-size: .66rem; color: var(--cueby-muted); background: none; border: 0; box-shadow: none; padding: 0; font-family: inherit; }
.cueby-ctx-sep { height: 1px; background: var(--cueby-line); margin: 4px 2px; }
.cueby-ctx-h { font-size: .7rem; color: var(--cueby-muted); padding: 4px 8px 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   โหมดมืด — html[data-cueby-theme="dark"] (ตั้งใน templates/app.php + cueby.js applyTheme)
   Bootstrap (เมนู ฟอร์ม modal) มืดตาม data-bs-theme · ตรงนี้ปรับส่วนของ Cueby + SweetAlert
   ไม่กระทบการพิมพ์ / PDF (หน้าพิมพ์กำหนดขาว-ดำเองใน .pp-page / #cueby-print)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-cueby-theme="dark"] {
  --cd-bg: #0f1012; --cd-app: #141518; --cd-surface: #1b1d21; --cd-surface2: #23262b; --cd-hover: #2a2e34;
  --cd-paper: #1e1f23; --cd-ink: #e5e7eb; --cd-muted: #9ca3af; --cd-line: #2e3238;
  color-scheme: dark;
}
html[data-cueby-theme="dark"] .cueby-body {
  --cueby-ink: var(--cd-ink); --cueby-muted: var(--cd-muted); --cueby-line: var(--cd-line); --cueby-soft: var(--cd-surface2); --cueby-accent: #f59e0b;
  background: var(--cd-bg) !important; color: var(--cd-ink);
}
html[data-cueby-theme="dark"] body.cueby-body { background-color: var(--cd-bg) !important; }

/* พื้นผิว (การ์ด แถบ แผง เมนู) */
html[data-cueby-theme="dark"] :is(.cueby-gate-card, .cueby-quota, .cueby-card, .cueby-empty, .cueby-top, .cueby-panel, .cueby-panel-h, .cueby-credit,
  .cueby-set-card, .cueby-qbar, .cueby-help-pop, .cueby-tour-card, .cueby-tag-menu, .cueby-ctx-menu, .cueby-stats > div, .cueby-g-page, .cueby-ghost-k, .cueby-chip) {
  background: var(--cd-surface); color: var(--cd-ink); border-color: var(--cd-line);
}
html[data-cueby-theme="dark"] .cueby-app { background: var(--cd-app); }
html[data-cueby-theme="dark"] .cueby-toolbar { background: #18191d; }
html[data-cueby-theme="dark"] :is(.cueby-sd-meta, .cueby-ver-bar, .cueby-ai-progress, .cueby-ai-diff, .cueby-bx-preview, .cueby-bx-table th, .cueby-set-conn.off) { background: var(--cd-surface2); color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-scenes li:hover { background: rgba(255,255,255,.05); }
html[data-cueby-theme="dark"] .cueby-scenes li.active { background: var(--cd-surface2); box-shadow: none; }
html[data-cueby-theme="dark"] .cueby-avatar { border-color: var(--cd-surface); }
html[data-cueby-theme="dark"] .cueby-empty { border-color: #3a3f46; }

/* hover / ช่องอ่อน */
html[data-cueby-theme="dark"] :is(.cueby-icon-btn:hover, .cueby-title-btn:hover, .cueby-elem:hover, .cueby-tag-menu button:hover, .cueby-ctx-menu button:hover:not(:disabled)) { background: var(--cd-hover); color: var(--cd-ink); }
html[data-cueby-theme="dark"] :is(.cueby-qbtn, .cueby-sd-chip, .cueby-badge, .cueby-link-pin) { background: var(--cd-surface2); color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-elem:hover { border-color: var(--cd-line); }
html[data-cueby-theme="dark"] :is(.cueby-title-btn, .cueby-ctx-menu button, .cueby-tag-menu button, .cueby-icon-btn) { color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-ctx-menu button:disabled { color: #5b616a; }
html[data-cueby-theme="dark"] :is(.cueby-elem, .cueby-chip, .cueby-qbtn, .cueby-tour-card p) { color: #d1d5db; }
html[data-cueby-theme="dark"] :is(.cueby-g-notes, .cueby-sd-sub, .cueby-ai-item-h, .cueby-l-title) { color: var(--cd-muted); }
html[data-cueby-theme="dark"] :is(.cueby-g-table td, .cueby-help td, .cueby-member, .cueby-link, .cueby-ver, .cueby-bx-table td) { border-color: var(--cd-line); }
html[data-cueby-theme="dark"] .cueby-chip { border-color: #4b5563; }

/* ปุ่ม / ชิปที่ "เลือกอยู่" (เดิมดำ) → กลับสีเป็นสว่างบนพื้นมืด */
html[data-cueby-theme="dark"] :is(.cueby-elem.active, .cueby-top-actions .btn.active, .cueby-chip.on, .cueby-qbtn.active, .cueby-credit.active, .cueby-sd-no, .cueby-top-burger .dropdown-item.active) {
  background: var(--cd-ink); color: #111; border-color: var(--cd-ink);
}
html[data-cueby-theme="dark"] :is(.cueby-chip:hover, .cueby-qbtn:hover, .cueby-credit:hover) { border-color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-qbtn.rec { background: var(--cd-surface); border-color: var(--cd-ink); color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-qbtn.cueby-qoff { background: var(--cd-surface); color: var(--cd-muted); box-shadow: -8px 0 8px -4px var(--cd-surface); }
html[data-cueby-theme="dark"] .cueby-sw { background: #4b5563; }
html[data-cueby-theme="dark"] .cueby-sw:checked { background: #a78bfa; }
html[data-cueby-theme="dark"] .cueby-bx-opt:has(input:checked) { border-color: var(--cd-ink); background: var(--cd-surface2); }
html[data-cueby-theme="dark"] :is(.cueby-brand-mark, .cueby-top-icon:not(:has(img))) { box-shadow: inset 0 0 0 1px #3a3f46; }

/* ปุ่ม Bootstrap ภายในแอป (btn-dark บนพื้นมืดจะมองไม่เห็น) — ตั้งผ่านตัวแปรของ Bootstrap ครบทุกสถานะ
   (hover / focus / active / disabled) ไม่งั้น .btn:hover ของ Bootstrap ใช้สีตัวอักษรเดิม (ดำ) */
html[data-cueby-theme="dark"] :is(.cueby-root, .swal2-container, .cueby-bx-modal) .btn-light {
  --bs-btn-color: var(--cd-ink); --bs-btn-bg: var(--cd-surface2); --bs-btn-border-color: var(--cd-line);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cd-hover); --bs-btn-hover-border-color: #3a3f46;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #33373e; --bs-btn-active-border-color: #3a3f46;
  --bs-btn-disabled-color: var(--cd-muted); --bs-btn-disabled-bg: var(--cd-surface2); --bs-btn-disabled-border-color: var(--cd-line);
}
html[data-cueby-theme="dark"] :is(.cueby-root, .swal2-container, .cueby-bx-modal) .btn-dark {
  --bs-btn-color: #111; --bs-btn-bg: var(--cd-ink); --bs-btn-border-color: var(--cd-ink);
  --bs-btn-hover-color: #111; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #111; --bs-btn-active-bg: #d1d5db; --bs-btn-active-border-color: #d1d5db;
  --bs-btn-disabled-color: #111; --bs-btn-disabled-bg: #6b7280; --bs-btn-disabled-border-color: #6b7280;
}
html[data-cueby-theme="dark"] :is(.cueby-root, .swal2-container, .cueby-bx-modal) .btn-outline-dark {
  --bs-btn-color: var(--cd-ink); --bs-btn-border-color: #6b7280;
  --bs-btn-hover-color: #111; --bs-btn-hover-bg: var(--cd-ink); --bs-btn-hover-border-color: var(--cd-ink);
  --bs-btn-active-color: #111; --bs-btn-active-bg: #d1d5db; --bs-btn-active-border-color: #d1d5db;
  --bs-btn-disabled-color: var(--cd-muted); --bs-btn-disabled-border-color: var(--cd-line);
}
/* ปุ่มแผงที่เปิดอยู่ (.active) — กลับสีสว่าง ทั้งตอนปกติและ hover */
html[data-cueby-theme="dark"] .cueby-top-actions .btn.active,
html[data-cueby-theme="dark"] .cueby-top-actions .btn.active:hover { background: var(--cd-ink); border-color: var(--cd-ink); color: #111; }

/* กล่องสีเตือน / สำเร็จ / โน้ต — โปร่งแสงบนพื้นมืด */
html[data-cueby-theme="dark"] :is(.cueby-alert.warn, .cueby-ac-off, .cueby-ai-consent, .cueby-quota.full, .cueby-credit.low, .cueby-sd-chip.mention) { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fcd34d; }
html[data-cueby-theme="dark"] .cueby-ai-consent span { color: #fde68a; }
html[data-cueby-theme="dark"] :is(.cueby-alert.ok, .cueby-set-conn:not(.off)) { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: #86efac; }
html[data-cueby-theme="dark"] :is(.cueby-badge.bx) { background: rgba(244,63,94,.15); color: #fda4af; }
html[data-cueby-theme="dark"] .cueby-bx-n { background: rgba(139,92,246,.2); color: #c4b5fd; }
html[data-cueby-theme="dark"] .cueby-ver.selected { background: rgba(239,68,68,.12); }
html[data-cueby-theme="dark"] :is(.cueby-ai-meta code, .cueby-set-top small code, .cueby-tour-card code, .cueby-help-tips code) { background: rgba(16,185,129,.15); color: #6ee7b7; }
html[data-cueby-theme="dark"] .cueby-g-body code { background: var(--cd-surface2); color: var(--cd-ink); }
html[data-cueby-theme="dark"] :is(.cueby-hint kbd, .cueby-help kbd, .cueby-set-top small kbd, .cueby-help-pop-k kbd, .cueby-tour-card kbd) { background: var(--cd-surface2); color: var(--cd-ink); border-color: #4b5563; box-shadow: 0 1px 0 #4b5563; }
html[data-cueby-theme="dark"] :is(.cueby-ai-goto, .cueby-sd-hidden button) { color: #93c5fd; }
html[data-cueby-theme="dark"] .cueby-ai-diff del { color: #fca5a5; }
html[data-cueby-theme="dark"] .cueby-ai-diff ins { color: #86efac; }
html[data-cueby-theme="dark"] .cueby-privacy.risk { color: #fca5a5; }
html[data-cueby-theme="dark"] .cueby-privacy.safe { color: #6ee7b7; }

/* กระดาษบท + CodeMirror */
html[data-cueby-theme="dark"] .cueby-paper { background: var(--cd-paper); color: var(--cd-ink); box-shadow: 0 0 0 1px #2a2d33, 0 20px 50px -24px rgba(0,0,0,.8); }
html[data-cueby-theme="dark"] .cueby-paper .cm-content { caret-color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-paper .cm-cursor { border-left-color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-paper .cm-selectionBackground,
html[data-cueby-theme="dark"] .cueby-paper .cm-focused .cm-selectionBackground,
html[data-cueby-theme="dark"] .cueby-paper .cm-content ::selection { background: rgba(96,165,250,.32) !important; }
html[data-cueby-theme="dark"] .cueby-paper .cm-placeholder { color: #6b7280; }
html[data-cueby-theme="dark"] .cueby-paper :is(.cm-panels, .cm-panel) { background: var(--cd-surface); color: var(--cd-ink); border-color: var(--cd-line); }
html[data-cueby-theme="dark"] .cueby-paper .cm-searchMatch { background: rgba(250,204,21,.25); outline-color: rgba(250,204,21,.5); }
html[data-cueby-theme="dark"] .cueby-paper .cm-searchMatch-selected { background: rgba(250,204,21,.45); }
html[data-cueby-theme="dark"] .cueby-l-scene[data-sn]::before,
html[data-cueby-theme="dark"] .cueby-l-scene[data-sn]::after { color: var(--cd-muted); }
html[data-cueby-theme="dark"] .cueby-l-section { color: #93c5fd; }
html[data-cueby-theme="dark"] .cueby-l-synopsis { color: #6ee7b7; }
html[data-cueby-theme="dark"] :is(.cueby-l-note, .cueby-l-boneyard, .cueby-l-pagebreak, .cueby-ghost, .cueby-ai-nl) { color: #6b7280; }
html[data-cueby-theme="dark"] .cueby-mk { color: #4b5563; }
html[data-cueby-theme="dark"] .cueby-note-in { background: rgba(245,158,11,.18); color: #fcd34d; }
html[data-cueby-theme="dark"] .cueby-note-in .cueby-mk { color: #a16207; }
html[data-cueby-theme="dark"] .cueby-ghost-k { color: var(--cd-muted); border-color: #4b5563; }
html[data-cueby-theme="dark"] .cueby-paper .cueby-tag { background: color-mix(in srgb, var(--tag) 24%, transparent); }
html[data-cueby-theme="dark"] .cueby-sd-chip.tag { background: color-mix(in srgb, var(--tag) 20%, var(--cd-surface)); border-color: color-mix(in srgb, var(--tag) 50%, var(--cd-surface)); color: color-mix(in srgb, var(--tag) 55%, #fff); }
html[data-cueby-theme="dark"] .cueby-preview { background: var(--cd-paper); color: var(--cd-ink); border-color: var(--cd-line); }
html[data-cueby-theme="dark"] .cueby-preview .pp-title { border-color: var(--cd-line); }

/* SweetAlert2 */
html[data-cueby-theme="dark"] .swal2-popup { background: var(--cd-surface); color: var(--cd-ink); }
html[data-cueby-theme="dark"] :is(.swal2-title, .swal2-html-container, .swal2-input-label) { color: var(--cd-ink); }
html[data-cueby-theme="dark"] :is(.swal2-input, .swal2-textarea, .swal2-select) { background: var(--cd-surface2); color: var(--cd-ink); border-color: var(--cd-line); }
html[data-cueby-theme="dark"] .swal2-validation-message { background: var(--cd-surface2); color: #fca5a5; }
html[data-cueby-theme="dark"] .swal2-close { color: var(--cd-muted); }
html[data-cueby-theme="dark"] .swal2-popup .text-muted { color: var(--cd-muted) !important; }
html[data-cueby-theme="dark"] .cueby-bx-modal .modal-content { background: var(--cd-surface); }
html[data-cueby-theme="dark"] .cueby-zoom { background: var(--cd-hover); border-color: #3a3f46; }
html[data-cueby-theme="dark"] .cueby-zoom button, html[data-cueby-theme="dark"] .cueby-zoom-v { color: var(--cd-ink); }
html[data-cueby-theme="dark"] .cueby-zoom button:hover:not(:disabled) { background: rgba(255,255,255,.08); }
html[data-cueby-theme="dark"] .cueby-zoom button:disabled { color: #4b5058; }
html[data-cueby-theme="dark"] .cueby-help-fab:not(.active) { background: var(--cd-hover); box-shadow: 0 0 0 1px #3a3f46, 0 10px 24px -8px rgba(0,0,0,.6); }
@media print {
  html[data-cueby-theme="dark"] { color-scheme: light; }
  html[data-cueby-theme="dark"] body.cueby-body { background: #fff !important; color: #000; }
}