/* สตูดิโอหนัง (film.js) — ใช้ตัวแปรสี/การ์ด/ปุ่มจาก style.css */
.fm-new textarea { min-height: 80px; }
.fm-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fm-proj { display: flex; gap: 14px; padding: 12px; transition: .15s; }
.fm-proj:hover { border-color: var(--line2); background: var(--panel2); }
.fm-thumb { width: 120px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.04); flex: none; display: grid; place-items: center; color: var(--faint); }
.fm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fm-pbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fm-pbody span { color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.fm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fm-title-in { flex: 1; min-width: 180px; font-size: 24px; font-weight: 600; background: none; border: 1px solid transparent; border-radius: 10px; padding: 4px 8px; outline: none; }
.fm-title-in:hover, .fm-title-in:focus { border-color: var(--line2); background: rgba(0,0,0,.2); }
.fm-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.fm-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.fm-steps button { background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--muted); border-radius: 99px; padding: 4px 10px 4px 4px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fm-steps button em { font-style: normal; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; background: rgba(255,255,255,.07); font-size: 11px; }
.fm-steps button.ok { color: var(--text); }
.fm-steps button.ok em { background: rgba(61,220,132,.2); color: var(--green); }
.fm-steps .arr { color: var(--faint); }
.fm-steps .fm-auto { margin-left: auto; border-radius: 99px; }
.fm-tabs { margin-bottom: 16px; }
.fm-job { padding: 10px 14px; margin-bottom: 10px; }
.fm-job-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.fm-job .bar { margin-top: 8px; }
.fm-joblog { margin-top: 6px; font-size: 11px; color: var(--faint); white-space: pre-wrap; max-height: 3.4em; overflow: hidden; }
.fm-hint { font-size: 13px; margin: -4px 0 12px; }
.fm-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fm-ai { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.fm-row2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fm-row2 > * { flex: 1; min-width: 120px; }
.fm-row2 > small, .fm-row2 > .btn { flex: none; min-width: 0; }
.fm-body input[type=text], .fm-body input[type=number], .fm-body select, .fm-body textarea {
  background: rgba(0,0,0,.25); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; outline: none; width: 100%; }
.fm-body textarea { resize: vertical; min-height: 56px; }
.fm-body input:focus, .fm-body select:focus, .fm-body textarea:focus { border-color: var(--violet); }
.fm-checks { flex-direction: row; gap: 18px; flex-wrap: wrap; }
.check.sm { font-size: 13px; padding: 0; gap: 6px; }
.check.sm input { width: 15px; height: 15px; }

/* เรื่อง & โครง */
.fm-plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.fm-plot { border: 1px solid var(--line2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.02); }
.fm-plot p { margin: 0; font-size: 13px; color: var(--muted); }
.fm-plot .btn { align-self: flex-start; margin-top: auto; }
.fm-beats { display: flex; flex-direction: column; gap: 10px; }
.fm-beat { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.fm-beat-no { width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.fm-beat-f { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fm-pct { display: inline-flex; align-items: center; gap: 4px; flex: none !important; min-width: 0 !important; }
.fm-pct input { width: 70px !important; }
input.sm { max-width: 170px; }

/* คลัง */
.fm-bible-top p { margin: 0 0 12px; font-size: 13px; }
.fm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.fm-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fm-card.locked { border-color: rgba(255,181,71,.4); }
.fm-card-img { aspect-ratio: 16/9; background: rgba(0,0,0,.3); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.fm-card-img.characters { aspect-ratio: 4/3; }
.fm-card-img img { width: 100%; height: 100%; object-fit: contain; }
.fm-card-img span { color: var(--faint); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.fm-card-b { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fm-card-h { display: flex; align-items: center; gap: 8px; }
.fm-card .field label { font-size: 12px; }
.fm-card textarea { min-height: 64px; font-size: 13px; }
.fm-card-f { display: flex; gap: 6px; }

/* ฉาก */
.fm-scenes { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 14px; align-items: start; }
.fm-scenes > * { min-width: 0; }
.fm-body, .fm-body .card { min-width: 0; max-width: 100%; }
.fm-list { padding: 10px; position: sticky; top: 12px; }
.fm-list-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.fm-list-bar select { flex: 1; min-width: 130px; }
.fm-body .fm-list-bar input[type=text] { width: 90px; flex: none; }
.fm-list-bar .btn { flex: none; }
.fm-list-rows { max-height: calc(100vh - 150px); overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.fm-bhead { font-size: 12px; color: var(--violet); padding: 8px 4px 2px; }
.fm-srow { display: flex; gap: 8px; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 6px; cursor: pointer; color: inherit; }
.fm-srow:hover { background: rgba(255,255,255,.04); }
.fm-srow.on { background: rgba(139,123,255,.14); border-color: rgba(139,123,255,.35); }
.fm-sthumb { width: 72px; aspect-ratio: 16/9; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; flex: none; position: relative; }
.fm-sthumb img { width: 100%; height: 100%; object-fit: cover; }
.fm-sthumb .clip { position: absolute; right: 3px; bottom: 2px; font-style: normal; font-size: 10px; color: #fff; text-shadow: 0 0 3px #000; }
.fm-sinfo { display: flex; flex-direction: column; min-width: 0; font-size: 13px; gap: 1px; }
.fm-sinfo .pill { padding: 0 6px; font-size: 11px; margin-left: 4px; }
.fm-sline { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-sinfo small { font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm-edit-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fm-iss { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fm-issue { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fm-issue > span:not(.pill) { flex: 1; min-width: 200px; }
.fm-issue:last-child { border-bottom: 0; }
.fm-media { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 14px; }
.fm-kf { aspect-ratio: 16/9; background: rgba(0,0,0,.35); border-radius: 12px; overflow: hidden; display: grid; place-items: center; position: relative; }
.fm-kf img, .fm-kf video { width: 100%; height: 100%; object-fit: contain; }
.fm-kf .cmodel { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 12px; background: rgba(0,0,0,.65); color: #fff; padding: 2px 8px; border-radius: 99px; }
.fm-kf .stale { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 12px; background: rgba(255,181,71,.9); color: #000; padding: 2px 8px; border-radius: 99px; }
.fm-kf-btns { display: flex; flex-direction: column; gap: 6px; }
.fm-sform { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.fm-sform .field label { font-size: 12px; }
.fm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fm-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); border-radius: 99px; padding: 3px 10px 3px 3px; cursor: pointer; color: var(--muted); font-size: 13px; }
.fm-chip img { width: 24px; height: 24px; border-radius: 99px; object-fit: cover; object-position: top; }
.fm-chip.on { border-color: var(--violet); background: rgba(139,123,255,.18); color: var(--text); }
.fm-dl { display: flex; flex-direction: column; gap: 8px; }
.fm-dline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.fm-dline textarea { grid-column: 1 / -1; min-height: 44px; }
.fm-dline input.sm { max-width: none; }
.fm-prompts { margin-top: 16px; }
.fm-prompts .tabs { margin-bottom: 8px; }
.fm-ptext { background: #07080d; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: 12px/1.55 var(--mono); color: #b8bdd0; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; margin: 0 0 8px; }

/* ตรวจ */
.fm-isslist { padding: 6px 14px; max-height: 60vh; overflow: auto; }

/* วิดีโอ */
.fm-rsel { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; align-items: center; }
.fm-rbeat { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.fm-rbeat.on { border-color: var(--violet); background: rgba(139,123,255,.12); }
.fm-rbeat input { accent-color: var(--violet); }
.fm-rsum { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 14px; margin: 6px 0 12px; }
.fm-rsum .eta { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.fm-kfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-top: 14px; }
.fm-kfcell { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid var(--line); cursor: pointer; padding: 0; color: var(--faint); font-size: 12px; }
.fm-kfcell.stale { border-color: var(--amber); }
.fm-kfcell img { width: 100%; height: 100%; object-fit: cover; }
.fm-kfcell em { position: absolute; left: 4px; bottom: 3px; font-style: normal; font-size: 11px; color: #fff; text-shadow: 0 0 4px #000; }
.fm-renders { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.fm-render { padding: 0; overflow: hidden; }
.fm-render video { width: 100%; display: block; background: #000; aspect-ratio: 16/9; }
.fm-trash { max-height: 240px; overflow: auto; }

/* ป๊อปอัปวางผลจาก AI อื่น */
.fm-modal { position: fixed; inset: 0; z-index: 60; background: rgba(4,5,10,.6); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; }
.fm-modal-card { width: min(720px, 100%); max-height: 90vh; overflow: auto; background: var(--panel-solid); }
.fm-modal textarea { width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--line2); border-radius: 10px; padding: 10px; font: 12px/1.5 var(--mono); color: var(--text); }

@media (max-width: 1100px) {
  .fm-sform { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1280px) {
  .fm-scenes { grid-template-columns: minmax(0, 1fr); }
  .fm-list { position: static; }
  .fm-list-rows { max-height: 42vh; }
}
@media (max-width: 900px) {
  .fm-scenes { grid-template-columns: minmax(0, 1fr); }
  .fm-list { position: static; }
  .fm-list-rows { max-height: 46vh; }
  .fm-media { grid-template-columns: 1fr; }
  .fm-kf-btns { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .fm-title-in { font-size: 19px; }
  .fm-steps { font-size: 12px; }
  .fm-steps .arr { display: none; }
  .fm-steps .fm-auto { margin-left: 0; }
  .fm-cards, .fm-renders, .fm-projects { grid-template-columns: 1fr; }
  .fm-sform { grid-template-columns: 1fr 1fr; }
  .fm-dline { grid-template-columns: 1fr auto 1fr; }
  .fm-thumb { width: 96px; }
}

/* เทียบโมเดลวิดีโอ (vcompare.js) */
.vc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.vc-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.vc-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--violet); flex: none; }
.vc-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-opt small { color: var(--muted); font-size: 12px; }
.vc-opt em { font-style: normal; font-size: 11px; padding: 0 6px; align-self: flex-start; }
.vc-opt.off { opacity: .45; cursor: default; }
.vc-opt:has(input:checked) { border-color: var(--violet); background: rgba(139,123,255,.1); }
.vc-src { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.vc-src img { width: 180px; border-radius: 10px; cursor: zoom-in; flex: none; }
.vc-src p { margin: 4px 0; font-size: 14px; }
.vc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 16px; }
.vc-cell { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vc-cell.pref { border-color: rgba(61,220,132,.5); }
.vc-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vc-cell video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 16/9; object-fit: contain; }
.vc-act { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-err { color: var(--red); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.vc-wait { aspect-ratio: 16/9; display: grid; place-items: center; align-content: center; gap: 8px; background: rgba(0,0,0,.25); border-radius: 8px; color: var(--faint); font-size: 13px; padding: 0 20%; }
.vc-wait .bar { width: 100%; }
@media (max-width: 760px) { .vc-src { flex-direction: column; } .vc-src img { width: 100%; } .vc-grid { grid-template-columns: 1fr; } }

/* แบบโปรแกรมเขียน prompt หนังยาว: ผู้เชี่ยวชาญ / โครงเรื่อง / ช่วงฉาก / ป้ายลัด / มุมมองบท */
.fm-experts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fm-experts .fm-chip { padding: 5px 12px; text-align: left; }
.fm-callout { background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.35); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px; }
.fm-outline.locked .fm-beat { opacity: .92; }
.fm-outline textarea:disabled, .fm-outline input:disabled { opacity: .75; }
.fm-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; padding: 10px 14px; font-size: 13px; }
.fm-range label { display: inline-flex; align-items: center; gap: 6px; }
.fm-range input[type=number] { width: 64px; }
.fm-range select { max-width: 220px; }
.fm-srow-w { display: flex; align-items: stretch; gap: 2px; }
.fm-srow-w .fm-srow { flex: 1; min-width: 0; }
.fm-srow-w.off .fm-srow { opacity: .45; }
.fm-eye { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 6px; font-size: 14px; border-radius: 8px; }
.fm-eye:hover { background: rgba(255,255,255,.05); }
.fm-idx { color: var(--violet); margin-right: 2px; }
.fm-codeline { font-size: 12px; color: var(--muted); background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; overflow-x: auto; white-space: nowrap; }
.fm-purpose { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #d9d4ff; background: rgba(139,123,255,.1); border: 1px solid rgba(139,123,255,.28); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.fm-modal-card.wide { width: min(980px, 100%); }
.fm-script { max-height: 64vh; font-size: 13px; }
#fm-ptabs { flex-wrap: wrap; }
.fm-modal .form-foot select, .fm-range select, .fm-range input, #fm-xtarget {
  background: rgba(0,0,0,.25); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 13px; }
.fm-sinfo .pill { align-self: flex-start; width: auto; }
.fm-edit-h { flex-wrap: wrap; row-gap: 6px; }

/* โครงเรื่องแบบ 989: สายหลัก/สายรอง, จุดบรรจบ, ค่าคงที่, ช่วงการผลิต, รายละเอียดคลัง */
.fm-threads { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 12px 0; align-items: start; }
.fm-thread { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.fm-thread > b { font-size: 13px; color: var(--amber); }
.fm-tl { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.fm-tl > span { color: var(--muted); }
.fm-tl textarea { min-height: 40px; }
.fm-conv { display: flex; flex-direction: column; gap: 6px; }
.fm-seg, .fm-det { border-top: 1px dashed var(--line); padding-top: 6px; }
.fm-seg > summary, .fm-det > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.fm-seg[open] { display: flex; flex-direction: column; gap: 6px; }
.fm-det-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 10px; margin-top: 6px; }
.fm-card .fm-det { margin: 4px 0; }
@media (max-width: 600px) { .fm-tl { grid-template-columns: 1fr; gap: 2px; } .fm-threads { grid-template-columns: 1fr; } }