/* cache-bump: v1.1.16 2026-07-30 */
/* IT-CIL v2 — dashboard component classes (teacher + admin + builder) */

/* mission banner */
.t-mission{ position:relative; overflow:hidden; border-radius:var(--r4); padding:22px 24px;
  background:linear-gradient(135deg,var(--pine-dark),var(--pine-deep)); box-shadow:var(--sh-2); }
.t-mission-bg{ position:absolute; top:-60px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(91,106,160,.28),transparent 65%); }

@media(max-width:860px){ .t-ov-grid{ grid-template-columns:1fr!important; } }

.t-quick{ display:flex; align-items:center; gap:9px; padding:13px 14px; border:1.5px solid var(--line); border-radius:var(--r2);
  background:var(--surface); color:var(--ink-2); font-family:var(--sans); font-weight:600; font-size:.84rem; cursor:pointer; text-align:left; transition:.15s; }
.t-quick:hover{ border-color:var(--accent); color:var(--accent-dark); background:var(--accent-soft); transform:translateY(-1px); }
.t-quick .ph{ font-size:1.3rem; color:var(--accent); }

/* core course rows */
.t-course{ display:flex; gap:16px; align-items:center; padding:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r3); box-shadow:var(--sh-1); transition:.18s; }
.t-course:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); border-color:color-mix(in srgb,var(--terra) 22%,var(--line)); }
.t-course-thumb{ position:relative; width:128px; aspect-ratio:16/9; flex-shrink:0; border-radius:var(--r2); overflow:hidden;
  background:radial-gradient(ellipse at 30% 30%, hsl(var(--hue),62%,58%) 0%, transparent 55%), linear-gradient(135deg, hsl(var(--hue),52%,32%), hsl(calc(var(--hue) + 28),56%,48%)); }
.t-course-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.t-play{ position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%; background:rgba(255,253,248,.94); color:var(--pine-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.t-lock{ position:absolute; inset:0; background:rgba(31,36,51,.5); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; }
.t-num{ width:30px; height:30px; border-radius:9px; flex-shrink:0; background:var(--terra-soft); color:var(--terra-dark);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; font-family:var(--serif); }
@media(max-width:560px){ .t-course-thumb{ width:92px; } }

/* my lessons grid */
.t-mylessons{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:920px){ .t-mylessons{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .t-mylessons{ grid-template-columns:1fr; } }
.t-ml-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; box-shadow:var(--sh-1); transition:.18s; }
.t-ml-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.t-ml-thumb{ position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:2rem; color:rgba(255,255,255,.9);
  background:radial-gradient(ellipse at 30% 30%, hsl(var(--hue),56%,56%) 0%, transparent 55%), linear-gradient(135deg, hsl(var(--hue),48%,34%), hsl(calc(var(--hue) + 26),52%,48%)); }
.t-ml-views{ position:absolute; right:9px; bottom:9px; background:rgba(31,36,51,.7); color:#fff; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:5px; }

/* builder */
.bld-banner{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:var(--r2); background:var(--accent-soft);
  color:var(--accent-dark); font-size:.84rem; margin-bottom:18px; }
.bld-banner .ph{ font-size:1.2rem; flex-shrink:0; }
.bld-banner b{ font-weight:700; }

.stepbar{ display:flex; align-items:center; margin-bottom:20px; }
.stepbar .st{ display:flex; align-items:center; gap:10px; }
.stepbar .st .dot{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem; background:var(--paper-2); color:var(--ink-3); border:2px solid transparent; font-family:var(--serif); transition:.2s; }
.stepbar .st .stl{ font-size:.84rem; font-weight:600; color:var(--ink-3); white-space:nowrap; }
.stepbar .st.on .dot{ background:var(--accent); color:#fff; box-shadow:0 0 0 4px var(--accent-soft); }
.stepbar .st.on .stl{ color:var(--accent-dark); }
.stepbar .st.done .dot{ background:var(--ok); color:#fff; }
.stepbar .st.done .stl{ color:var(--ink); }
.stepbar .ln{ flex:1; height:2px; background:var(--line); margin:0 10px; min-width:16px; }
.stepbar .ln.done{ background:var(--ok); }
@media(max-width:680px){ .stepbar .stl{ display:none; } .stepbar .st{ flex:0 0 auto; } .stepbar .ln{ min-width:10px; } }

.canvas{ display:flex; flex-direction:column; gap:12px; }
.block{ border:1.5px solid var(--line); border-radius:var(--r3); background:var(--surface); padding:14px 16px; transition:.15s; }
.block:hover{ border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); box-shadow:var(--sh-1); }
.block-h{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:.88rem; margin-bottom:11px; color:var(--ink-2); }
.block-h .ph{ color:var(--accent); font-size:1.1rem; }
.block-h .rm{ margin-left:auto; color:var(--ink-4); cursor:pointer; transition:.15s; }
.block-h .rm:hover{ color:var(--bad); }
.ghost{ border:2px dashed var(--line); border-radius:var(--r3); padding:14px; text-align:center; color:var(--ink-3); font-size:.84rem; background:var(--surface-2); }
.pal{ display:flex; flex-direction:column; gap:8px; }
.pal-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px dashed var(--line); border-radius:var(--pill);
  background:var(--surface); color:var(--ink-2); font-size:.84rem; font-weight:600; cursor:pointer; font-family:var(--sans); transition:.15s; }
.pal-btn:hover{ border-color:var(--accent); color:var(--accent-dark); border-style:solid; background:var(--accent-soft); }
.pal-btn .ph{ font-size:1.1rem; }

.tpl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
@media(max-width:760px){ .tpl-grid{ grid-template-columns:1fr; } }
.tpl{ border:2px solid var(--line); border-radius:var(--r3); overflow:hidden; cursor:pointer; background:var(--surface); transition:.18s; text-align:left; padding:0; font-family:var(--sans); }
.tpl:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--sh-2); }
.tpl.on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tpl-top{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92); font-size:2rem; position:relative;
  background:linear-gradient(135deg, hsl(var(--hue),48%,34%), hsl(calc(var(--hue) + 28),52%,48%)); }
.tpl-tick{ position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:none; align-items:center; justify-content:center; font-size:.75rem; }
.tpl.on .tpl-tick{ display:flex; }
.tpl-body{ padding:12px 14px; }
.tpl-body h6{ margin:0 0 4px; font-size:.92rem; font-family:var(--serif); }
.tpl-body p{ margin:0; font-size:.76rem; color:var(--ink-3); line-height:1.45; }

/* admin chart */
.bars{ display:flex; align-items:stretch; gap:7px; height:168px; }
.bars > div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; }
.bars > div > i{ display:block; width:100%; border-radius:5px 5px 0 0; }

/* small avatar in user table */
.usr-av-sm{ width:30px; height:30px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg,var(--terra),var(--terra-dark));
  color:#fff; font-weight:700; font-size:.72rem; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); }

/* density: compact tightens dashboard paddings */body[data-density="compact"] .page{ padding-top:18px; padding-bottom:48px; }
body[data-density="compact"] .card-pad{ padding:15px 16px; }
body[data-density="compact"] .stat{ padding:13px 15px; }
body[data-density="compact"] .stat .ic{ width:36px; height:36px; font-size:1.1rem; margin-bottom:9px; }
body[data-density="compact"] .stat .n{ font-size:1.5rem; }
body[data-density="compact"] .tbl td{ padding:9px 16px; }

/* v1.1.1 patch6: "คลังเนื้อหา" การ์ดคอมแพกต์ — เบากว่า KPI ด้านบน กันแย่งสายตา */
.inv-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.inv-card{ display:flex; align-items:center; gap:11px; background:var(--card,#fff); border:1px solid var(--line); border-radius:13px; padding:13px 15px; }
.inv-card .ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex:none; }
.inv-card .n{ font-size:1.35rem; font-weight:800; line-height:1; }
.inv-card .l{ font-size:.76rem; color:var(--ink-3); margin-top:2px; }
@media(max-width:1000px){ .inv-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px){ .inv-grid{ grid-template-columns:repeat(2,1fr); } }
body[data-density="compact"] .t-course{ padding:11px; gap:13px; }
body[data-density="compact"] .ph-head{ margin-bottom:14px; }

/* CMS rows */
.cms-row{ display:grid; grid-template-columns:200px 1fr; gap:14px; align-items:start; }
@media(max-width:680px){ .cms-row{ grid-template-columns:1fr; gap:6px; } }
.cms-meta label{ display:block; font-size:.84rem; font-weight:600; color:var(--ink-2); }
.cms-meta code{ font-size:.68rem; color:var(--ink-4); font-family:var(--mono,monospace); background:var(--surface-2); padding:1px 6px; border-radius:5px; display:inline-block; margin-top:4px; }

/* notification popover */
.pop-scrim{ position:fixed; inset:0; z-index:50; }
.pop{ position:absolute; top:48px; right:0; z-index:51; width:300px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r3); box-shadow:var(--sh-3); overflow:hidden; animation:lmin .18s ease; }
.pop-head{ font-family:var(--serif); font-weight:600; font-size:.95rem; padding:13px 16px; border-bottom:1px solid var(--line-2); }
.pop-item{ display:flex; gap:11px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--line-2); }
.pop-item:last-child{ border-bottom:none; }
.pop-item:hover{ background:var(--surface-2); }
.pop-ic{ width:30px; height:30px; border-radius:9px; flex-shrink:0; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; }

/* comments */
.cmt{ display:flex; gap:11px; }
.cmt-av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-3); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.cmt-head{ display:flex; align-items:center; gap:9px; }
.cmt-head b{ font-size:.88rem; }
.cmt-text{ margin:3px 0 0; font-size:.88rem; color:var(--ink-2); line-height:1.55; }
.cmt-reply{ margin-top:9px; padding:10px 13px; border-radius:var(--r2); background:var(--accent-soft,var(--pine-soft)); border-left:3px solid var(--pine); }
.cmt-reply p{ margin:0; font-size:.86rem; color:var(--pine-dark); line-height:1.55; }
.cmt-held{ border:1px dashed var(--warn); background:var(--warn-soft); border-radius:var(--r2); padding:12px 14px; }
.flag-word{ background:var(--bad-soft); color:var(--bad-ink); border-radius:5px; padding:0 5px; font-weight:600; }
.word-tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--pill); background:var(--bad-soft); color:var(--bad-ink); font-size:.82rem; font-weight:600; }
.word-tag i{ cursor:pointer; opacity:.7; }
.word-tag i:hover{ opacity:1; }

/* SERP preview */
.serp{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:14px 16px; box-shadow:var(--sh-1); }
.serp-url{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--ink-2); margin-bottom:4px; }
.serp-fav{ width:18px; height:18px; border-radius:50%; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; }
.serp-url .ph{ margin-left:auto; color:var(--ink-4); }
.serp-title{ color:#1a0dab; font-size:1.1rem; line-height:1.3; margin-bottom:3px; font-family:var(--serif); }
.serp-desc{ font-size:.82rem; color:var(--ink-2); line-height:1.5; }
.serp-og{ aspect-ratio:1200/360; background:linear-gradient(135deg,var(--pine-dark),var(--pine-deep)); border-radius:var(--r2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:2rem; margin-bottom:2px; }

/* Google button */
/* ⚠️ .gbtn คือแท็ก <a> — ไม่ปิด text-decoration แล้วข้อความ "เข้าสู่ระบบด้วย Google" จะถูกขีดเส้นใต้ */
.gbtn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:.7rem 1rem; border:1.5px solid var(--line);
  border-radius:var(--r2); background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:.92rem; font-weight:600; cursor:pointer; transition:.15s;
  text-decoration:none; }
.gbtn:hover{ border-color:var(--ink-3); box-shadow:var(--sh-1); background:#fff; }
.gbtn-ic{ display:flex; }
.lm-or{ display:flex; align-items:center; gap:12px; margin:14px 0; color:var(--ink-4); font-size:.78rem; }
.lm-or::before, .lm-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.gacct{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r2); background:var(--surface-2); border:1px solid var(--line); }
.gacct-av{ width:40px; height:40px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--pine),var(--pine-dark)); color:#fff; font-weight:700; font-family:var(--serif); display:flex; align-items:center; justify-content:center; }
.gacct b{ font-size:.88rem; display:block; }

.grid-name{ display:grid; grid-template-columns:130px 1fr 1fr 1fr; gap:14px; }
@media(max-width:680px){ .grid-name{ grid-template-columns:1fr 1fr; } }

/* profile */
.prof-hero{ position:relative; overflow:hidden; padding:0; }
.prof-hero-bg{ position:absolute; inset:0; background:linear-gradient(135deg,var(--terra-dark),#c8431a); }
.prof-hero-bg::after{ content:''; position:absolute; top:-60px; right:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%); }
.prof-hero-row{ position:relative; z-index:1; display:flex; align-items:center; gap:18px; padding:24px 26px; }
.prof-avatar{ width:74px; height:74px; border-radius:20px; flex-shrink:0; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.3); color:#fff; font-family:var(--serif); font-weight:700; font-size:1.7rem; display:flex; align-items:center; justify-content:center; }
.prof-grid{ display:flex; flex-direction:column; gap:14px; }
.prof-item{ display:flex; gap:12px; align-items:flex-start; }
.prof-ic{ width:36px; height:36px; border-radius:10px; flex-shrink:0; background:var(--accent-soft,var(--terra-soft)); color:var(--accent-dark,var(--terra-dark)); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.prof-item > div > div{ font-size:.92rem; font-weight:500; margin-top:1px; }

/* v1.0.7 (ข้อ 0): ตัวแก้ไขเต็มหน้า — ฟอร์มเต็มความกว้าง จัดกลาง (เลิกพรีวิว 60/40) */
.ed-shell{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--paper,#f7f8fc); }
.ed-topbar{ display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--surface,#fff); position:sticky; top:0; z-index:20; }
.ed-topbar-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.ed-topbar-title b{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32vw; display:block; }
.ed-topbar-title .muted{ font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32vw; display:block; }
.ed-topbar-title > i{ font-size:1.35rem; color:var(--plum,#8a4f7d); flex-shrink:0; }
.ed-body{ flex:1; overflow-y:auto; padding:26px 20px 48px; }
.ed-form{ width:100%; max-width:860px; margin:0 auto; }
.ed-form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
/* v1.1.1 patch3: ตัวแก้ไขเต็มจอ (ed-shell) มีปุ่มบนแถบ sticky อยู่แล้ว → ซ่อนปุ่มล่างบนจอกว้าง กันแสดงซ้ำ
   (จอเล็กปุ่มบนถูกซ่อน จึงโชว์ปุ่มล่างแทน — ดู @media max-width:720px) · ไม่กระทบหน้า config ที่ไม่มี ed-shell */
.ed-shell .ed-form-actions{ display:none; }
/* v1.1.1: เบรดครัมบ์นำทางย้อนกลับ (ศูนย์ตั้งค่า + หน้าย่อย) */
.crumbs{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--ink-3); margin-bottom:8px; flex-wrap:wrap; }
.crumbs a{ color:var(--ink-3); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.crumbs a:hover{ color:var(--plum); text-decoration:underline; }
.crumbs > span{ color:var(--ink-2); font-weight:600; }
.crumbs .ph{ font-size:.85rem; color:var(--ink-4); }

/* ══ v1.1.1: โมดัลยืนยันสวย ๆ (แทน confirm เนทีฟ) + Toast แจ้งผล ══ */
.itcil-modal-mask{ position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(31,36,51,.5); opacity:0; transition:opacity .2s ease; }
.itcil-modal-mask.show{ opacity:1; }
.itcil-modal{ background:var(--surface); border-radius:var(--r4); box-shadow:var(--sh-3); max-width:420px; width:100%;
  padding:24px; transform:scale(.96) translateY(6px); transition:transform .2s ease; }
.itcil-modal-mask.show .itcil-modal{ transform:scale(1) translateY(0); }
.itcil-modal-ic{ width:48px; height:48px; border-radius:14px; background:var(--bad-soft); color:var(--bad);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:14px; }
.itcil-modal h3{ font-family:var(--serif); font-size:1.15rem; margin:0 0 6px; color:var(--ink); }
.itcil-modal p{ color:var(--ink-2); font-size:.9rem; line-height:1.65; margin:0 0 20px; white-space:pre-line; overflow-wrap:anywhere; }
.itcil-modal-actions{ display:flex; gap:10px; justify-content:flex-end; }
.itcil-modal-ok{ background:var(--bad); border:1.5px solid var(--bad); color:#fff; }
.itcil-modal-ok:hover{ background:var(--bad-ink); border-color:var(--bad-ink); }

#itcil-toast-root{ position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:10px;
  max-width:min(92vw,380px); pointer-events:none; }
.itcil-toast{ display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:var(--r2);
  background:var(--surface); box-shadow:var(--sh-3); border:1px solid var(--line); font-size:.88rem; color:var(--ink);
  transform:translateX(120%); opacity:0; transition:transform .3s ease, opacity .3s ease; pointer-events:auto; }
.itcil-toast.show{ transform:translateX(0); opacity:1; }
.itcil-toast.ok{ border-left:4px solid var(--ok); }
.itcil-toast.bad{ border-left:4px solid var(--bad); }
.itcil-toast > i{ font-size:1.25rem; flex-shrink:0; margin-top:1px; }
.itcil-toast.ok > i{ color:var(--ok); }
.itcil-toast.bad > i{ color:var(--bad); }
.itcil-toast span{ flex:1; line-height:1.5; white-space:pre-line; }
.itcil-toast button{ background:none; border:0; color:var(--ink-4); cursor:pointer; padding:0; font-size:1rem; flex-shrink:0; line-height:1; }
.itcil-toast button:hover{ color:var(--ink-2); }
@media(max-width:560px){ #itcil-toast-root{ left:16px; right:16px; max-width:none; } }

/* ══ v1.1.1 (redesign): ตัวแก้ไข 2 แผง (แถบหัวข้อซ้าย + เนื้อหาการ์ดขวา) ══
   ใช้เฉพาะ layouts.editor (เติม .ed-shell--split) — ไม่กระทบ layouts.wizard */
.ed-shell--split{ height:100vh; height:100dvh; overflow:hidden; }
.ed-main{ flex:1; min-height:0; display:grid; grid-template-columns:236px minmax(0,1fr); overflow:hidden; }
.ed-main.no-nav{ grid-template-columns:minmax(0,1fr); }
.ed-nav{ border-right:1px solid var(--line); background:var(--surface); overflow-y:auto; padding:18px 12px; }
.ed-nav .lbl{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); padding:0 10px 10px; }
.ed-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r2); color:var(--ink-2);
  text-decoration:none; font-weight:600; font-size:.86rem; cursor:pointer; transition:.14s; margin-bottom:3px; position:relative; }
.ed-nav a .ph{ font-size:1.15rem; color:var(--ink-3); transition:.14s; }
.ed-nav a:hover{ background:var(--surface-2); }
.ed-nav a.on{ background:var(--plum-soft); color:var(--plum); }
.ed-nav a.on .ph{ color:var(--plum); }
.ed-nav a.on::before{ content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:99px; background:var(--plum); }
.ed-nav .tip{ margin:16px 8px 0; padding:12px; border-radius:var(--r2); background:var(--amber-soft); color:var(--amber-dark);
  font-size:.78rem; line-height:1.6; display:flex; gap:8px; }
.ed-content{ overflow-y:auto; padding:24px 26px 60px; }
.ed-content-inner{ max-width:820px; margin:0 auto; }
.ed-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--sh-1);
  margin-bottom:20px; overflow:hidden; scroll-margin-top:16px; }
.ed-card-h{ display:flex; align-items:center; gap:11px; padding:15px 20px; border-bottom:1px solid var(--line-2); }
.ed-card-h .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.ed-card-h b{ font-size:.98rem; }
.ed-card-h small{ display:block; color:var(--ink-3); font-size:.76rem; margin-top:1px; }
.ed-card-b{ padding:20px; }
.ed-card-b .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.ed-card-b .grid2 .span2{ grid-column:1 / -1; }
/* โลโก้จัดกึ่งกลาง บนสุดของการ์ด */
.logo-top{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed var(--line); }
.logo-top .field{ margin:0; width:auto; max-width:100%; }
.logo-top .field > label{ font-size:.82rem; font-weight:600; color:var(--ink-2); margin-bottom:8px; }
.logo-top .img-up{ margin:0 auto; }
/* พรีวิว SEO — ผลค้นหา Google + การ์ดแชร์ */
.seo-snippet{ border:1px solid var(--line); border-radius:var(--r2); padding:16px 20px; background:#fff; max-width:600px; }
.seo-snippet .fav{ display:inline-flex; align-items:center; gap:8px; margin-bottom:6px; }
.seo-snippet .fav i{ width:26px; height:26px; border-radius:50%; background:var(--pine-soft); color:var(--pine); display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.seo-snippet .u b{ color:#202124; font-weight:500; display:block; font-size:.82rem; }
.seo-snippet .u span{ color:#4d5156; font-size:.8rem; }
.seo-snippet .t{ color:#1a0dab; font-size:1.35rem; margin:6px 0 4px; line-height:1.3; }
.seo-snippet .d{ color:#4d5156; font-size:.9rem; line-height:1.55; }
.og-card{ display:flex; max-width:560px; border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; background:var(--surface); }
.og-card .og-img{ width:200px; aspect-ratio:1.91; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:2rem; flex-shrink:0; border-right:1px solid var(--line); }
.og-card .og-img img{ width:100%; height:100%; object-fit:cover; }
.og-card .og-meta{ padding:14px 16px; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.og-card .og-dom{ font-size:.72rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.03em; }
.og-card .og-t{ font-weight:600; font-size:1rem; margin:4px 0; line-height:1.3; }
.og-card .og-d{ font-size:.84rem; color:var(--ink-3); line-height:1.45; }
@media(max-width:860px){
  .ed-main{ grid-template-columns:1fr; }
  .ed-nav{ display:none; }
  .ed-card-b .grid2{ grid-template-columns:1fr; }
}

/* v1.1.1 (เรื่อง 3): แถบนำทางหัวข้อในฟอร์มยาว (sticky ใน .ed-body ที่เลื่อน) */
.ed-secnav{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:9px 12px; margin-bottom:20px; box-shadow:var(--sh-1); }
.ed-secnav-label{ font-size:.78rem; font-weight:600; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; margin-right:2px; }
.ed-secnav-btn{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2); font-family:var(--sans);
  font-weight:600; font-size:.82rem; padding:6px 12px; border-radius:var(--pill); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.ed-secnav-btn:hover{ border-color:var(--plum); color:var(--plum); background:var(--plum-soft); }
.ed-secnav-btn .ph{ font-size:1rem; }
.ed-anchor{ scroll-margin-top:66px; }

/* v1.0.6 (ข้อ 5): ตัวอัปโหลดรูปปก 16:9 */
.cover-up{ position:relative; width:100%; max-width:460px; aspect-ratio:16/9; border:1.5px dashed var(--line); border-radius:var(--r2);
  overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; }
.cover-up.has{ border-style:solid; }
.cover-up-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover-up-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-4); font-size:.86rem; }
.cover-up-empty i{ font-size:2rem; }
.cover-up-bar{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:8px; justify-content:center; padding:10px;
  background:linear-gradient(to top, rgba(31,36,51,.55), transparent); }
.cover-up.has .cover-up-bar .btn-soft{ background:rgba(255,255,255,.92); color:var(--ink); }

/* v1.0.7: อัปโหลดรูปทั่วไป (โลโก้/OG/ตราโครงการ) — อัตราส่วนอิสระ */
.img-up{ position:relative; display:inline-block; width:100%; max-width:280px; min-width:160px; border:1.5px dashed var(--line);
  border-radius:var(--r2); overflow:hidden; background:var(--surface-2); vertical-align:top; }
.img-up.has{ border-style:solid; }
.img-up-img{ display:block; width:100%; max-height:180px; object-fit:contain; background:var(--surface-2); }
.img-up-empty{ height:120px; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:2rem; }
.img-up-bar{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:6px; justify-content:center; padding:8px;
  background:linear-gradient(to top, rgba(31,36,51,.5), transparent); }
.img-up.has .img-up-bar .btn-soft{ background:rgba(255,255,255,.92); color:var(--ink); }
.img-up-load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(31,36,51,.5); color:#fff; font-size:.82rem; }
.cover-up-load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(31,36,51,.5); color:#fff; font-size:.86rem; }
@media(max-width:720px){
    .ed-topbar-act{ display:none; }
    /* v1.1.1 patch3: จอเล็กปุ่มบนถูกซ่อน → โชว์ปุ่มล่างแทน (ตัวแก้ไขเต็มจอ) */
    .ed-shell .ed-form-actions{ display:flex; }
    .ed-topbar-title b, .ed-topbar-title .muted{ max-width:40vw; }
    .ed-body{ padding:18px 14px 40px; }
}

/* v1.0.7 (B2): แดชบอร์ด — กราฟ + การเรียนครู ซ้อนแนวตั้งบนจอเล็ก */
@media(max-width:860px){
    .dash-metrics-grid{ grid-template-columns:1fr !important; }
}

/* ═══ v1.0.7 (ส่วน C): นักเรียน/ชุมชน UX ═══ */
/* C-S2: กล่อง PIN 6 หลัก + คีย์แพดตัวเลข */
.pin-boxes{ display:flex; gap:8px; justify-content:center; margin:6px 0 14px; }
.pin-box{ width:42px; height:52px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:var(--ink); font-family:var(--serif); }
.pin-box.filled{ border-color:var(--pine); background:var(--pine-soft); color:var(--pine-dark); }
.pin-box.cursor{ border-color:var(--pine); box-shadow:0 0 0 3px var(--pine-soft); }
.pin-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; max-width:260px; margin:0 auto; }
.pin-key{ height:52px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); font-size:1.3rem; font-weight:600;
  color:var(--ink); cursor:pointer; transition:.12s; font-family:var(--serif); display:flex; align-items:center; justify-content:center; }
.pin-key:hover{ border-color:var(--pine); background:var(--pine-soft); }
.pin-key:active{ transform:scale(.95); }
.pin-key.ghost{ background:transparent; border-color:transparent; }
.pin-key.ghost:hover{ background:var(--surface-2); border-color:var(--line); }

/* C-S1: แบบทดสอบทีละข้อ (wizard) */
.qw-progress{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-bottom:6px; }
.qw-progress > span{ display:block; height:100%; background:var(--pine); border-radius:99px; transition:width .3s; }
.qw-opts{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.qw-opt{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px;
  background:var(--surface); cursor:pointer; transition:.14s; text-align:left; font-size:.98rem; color:var(--ink); width:100%; font-family:var(--sans); }
.qw-opt:hover{ border-color:var(--pine); background:var(--pine-soft); }
.qw-opt.sel{ border-color:var(--pine); background:var(--pine-soft); color:var(--pine-dark); font-weight:600; }
.qw-opt .mk{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:.86rem; color:var(--ink-3); }
.qw-opt.sel .mk{ background:var(--pine); border-color:var(--pine); color:#fff; }

/* ═══ v1.0.7 (ส่วน E): วิซาร์ดสร้างบทเรียนของครู 4 ขั้น ═══ */
.wz-steps{ display:flex; align-items:center; gap:6px; margin-bottom:18px; overflow-x:auto; padding-bottom:4px; }
.wz-step{ display:flex; align-items:center; gap:10px; padding:8px 14px; border:1.5px solid var(--line); border-radius:var(--pill);
  background:var(--surface); cursor:pointer; transition:.15s; white-space:nowrap; font-family:var(--sans); color:var(--ink-2); flex-shrink:0; }
.wz-step:hover:not(:disabled){ border-color:var(--pine); }
.wz-step.on{ border-color:var(--pine); background:var(--pine-soft); color:var(--pine-dark); }
.wz-step.done .wz-step-n{ background:var(--pine); border-color:var(--pine); color:#fff; }
.wz-step.locked{ opacity:.5; cursor:not-allowed; }
.wz-step-n{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:1rem; flex-shrink:0; }
.wz-step.on .wz-step-n{ background:var(--pine); border-color:var(--pine); color:#fff; }
.wz-step-t{ display:flex; flex-direction:column; line-height:1.15; font-weight:600; font-size:.9rem; }
.wz-step-t small{ font-weight:500; font-size:.68rem; color:var(--ink-4); }
.wz-step-line{ flex:1; min-width:14px; height:1.5px; background:var(--line); flex-shrink:1; }
.wz-panel{ margin-bottom:0; }
/* v1.1.1: แท็บย่อยในขั้น "แบบทดสอบ" — สลับ คำถามคั่น ↔ แบบทดสอบหลังเรียน (กันฟอร์มยาว) */
.wz-subtabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.wz-subtab{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1.5px solid var(--line);
  border-radius:var(--pill); background:var(--surface); color:var(--ink-2); font-family:var(--sans); font-weight:600;
  font-size:.86rem; cursor:pointer; transition:.15s; }
.wz-subtab:hover{ border-color:var(--pine); }
.wz-subtab.on{ border-color:var(--pine); background:var(--pine); color:#fff; box-shadow:var(--sh-1); }
.wz-subtab.on .badge{ background:rgba(255,255,255,.22); color:#fff; }
.wz-subtab .ph{ font-size:1.1rem; }
.wz-nav{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.wz-summary{ display:flex; gap:16px; align-items:center; margin-top:8px; }
.wz-sum-cover{ width:150px; aspect-ratio:16/9; border-radius:var(--r2); overflow:hidden; flex-shrink:0; background:var(--surface-2); }
.wz-sum-cover img{ width:100%; height:100%; object-fit:cover; }
.wz-sum-nocover{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:1.6rem; }
@media(max-width:640px){
    .wz-step-t{ display:none; }
    .wz-step-line{ min-width:8px; }
    .wz-summary{ flex-direction:column; align-items:flex-start; }
    .wz-sum-cover{ width:100%; }
}

/* C-S3: หน้าผลคะแนน */
.qr-emoji{ font-size:3.4rem; line-height:1; }
.qr-score{ font-family:var(--serif); font-size:2.6rem; font-weight:700; line-height:1; }
.qr-ring{ --pct:0; width:120px; height:120px; border-radius:50%; margin:6px auto 0;
  background:conic-gradient(var(--pine) calc(var(--pct)*1%), var(--surface-2) 0);
  display:flex; align-items:center; justify-content:center; }
.qr-ring > div{ width:92px; height:92px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column;
  align-items:center; justify-content:center; }

/* ═══ v1.1.0 (แบบ A): sidebar โฟกัสงาน ═══ */
/* ช่องค้นหาเมนูใน sidebar */
.rail-search{ margin:12px 12px 2px; position:relative; }
.rail-search .ph{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-4); font-size:1rem; pointer-events:none; }
.rail-search input{ width:100%; border:1.5px solid var(--line); border-radius:var(--r2); background:var(--surface-2);
  padding:.5rem .7rem .5rem 2.1rem; font-family:var(--sans); font-size:.84rem; color:var(--ink); outline:none; transition:.15s; }
.rail-search input:focus{ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft); }
/* badge จำนวนงานค้างบนเมนู */
.nav-i .nav-cnt{ margin-left:auto; min-width:21px; height:21px; padding:0 6px; border-radius:var(--pill); background:var(--terra);
  color:#fff; font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
/* ศูนย์ตั้งค่า (hub) */
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.hub-card{ display:flex; gap:13px; align-items:flex-start; text-align:left; padding:17px 18px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r3); cursor:pointer; text-decoration:none; color:inherit; transition:.16s; box-shadow:var(--sh-1); }
.hub-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--sh-2); }
.hub-ic{ width:42px; height:42px; border-radius:var(--r2); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff; }
.hub-card b{ display:block; font-size:.92rem; color:var(--ink); }
.hub-card small{ display:block; font-size:.76rem; color:var(--ink-3); margin-top:3px; line-height:1.45; }
/* แถวงานรอตรวจ */
.inbox-row{ display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border-bottom:1px solid var(--line-2); }
.inbox-row:last-child{ border-bottom:none; }
.inbox-row:hover{ background:var(--surface-2); }
.inbox-ic{ width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; }
.inbox-act{ display:flex; gap:7px; margin-left:auto; flex-shrink:0; align-items:flex-start; }
@media(max-width:640px){ .inbox-row{ flex-wrap:wrap; } .inbox-act{ margin-left:51px; width:100%; } }

/* ═══ v1.1.0 (F2): วิซาร์ดฟอร์มบทเรียนหลัก/วิดีโอเสริมของแอดมิน ═══ */
.wz-wrap{ width:100%; max-width:760px; margin:0 auto; }
/* ป้าย "เติมจาก YouTube อัตโนมัติ" */
.auto-note{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--ok-ink); background:var(--ok-soft);
  border-radius:var(--pill); padding:3px 11px; font-weight:600; }
.auto-note.off{ color:var(--ink-3); background:var(--surface-2); }
/* quiz builder ใหม่ — คลิกปุ่มหน้าตัวเลือกเพื่อตั้งเฉลย (ทั้งแถวเป็นสีเขียว) */
.qz-opt{ display:flex; align-items:center; gap:9px; }
.qz-mark{ width:34px; height:34px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-4); font-size:1rem; transition:.14s; }
.qz-mark:hover{ border-color:var(--ok); color:var(--ok); }
.qz-opt.ans .qz-mark{ background:var(--ok); border-color:var(--ok); color:#fff; }
.qz-opt.ans .inp{ border-color:var(--ok); background:var(--ok-soft); }
.qz-anslabel{ font-size:.7rem; font-weight:700; color:var(--ok-ink); width:44px; flex-shrink:0; text-align:center; visibility:hidden; }
.qz-opt.ans .qz-anslabel{ visibility:visible; }
/* ตัวเลือกรูปปก: ภาพจาก YouTube vs อัปโหลดเอง */
.cover-pick{ display:flex; gap:14px; flex-wrap:wrap; }
.cover-pick-tile{ all:unset; cursor:pointer; display:block; }
.cover-pick-frame{ width:200px; aspect-ratio:16/9; border-radius:var(--r2); overflow:hidden; border:2.5px solid var(--line);
  position:relative; background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--ink-4); transition:.15s; }
.cover-pick-tile:hover .cover-pick-frame{ border-color:var(--accent); }
.cover-pick-tile.on .cover-pick-frame{ border-color:var(--ok); }
.cover-pick-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover-pick-frame.dashed{ border-style:dashed; }
.cover-pick-tick{ position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:50%; background:var(--ok);
  color:#fff; display:none; align-items:center; justify-content:center; font-size:.75rem; z-index:1; }
.cover-pick-tile.on .cover-pick-tick{ display:flex; }
.cover-pick-tile small{ display:block; text-align:center; margin-top:6px; font-size:.74rem; color:var(--ink-3); }
/* แถวสรุปขั้นสุดท้าย */
.sum-row{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:.88rem; align-items:flex-start; }
.sum-row:last-child{ border-bottom:none; }
.sum-row > b{ width:120px; flex-shrink:0; color:var(--ink-2); font-weight:600; }
.sum-row > span{ min-width:0; overflow-wrap:anywhere; }
.sum-row .fix{ margin-left:auto; flex-shrink:0; }
/* ปุ่มสลับลำดับในหน้ารายการ */
.move-btns{ display:inline-flex; flex-direction:column; gap:2px; vertical-align:middle; }
.move-btns button{ width:22px; height:16px; border:1px solid var(--line); border-radius:5px; background:var(--surface);
  color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.7rem; padding:0; transition:.12s; }
.move-btns button:hover{ border-color:var(--accent); color:var(--accent); }
.move-btns button:disabled{ opacity:.35; pointer-events:none; }

/* ═══ v1.1.0 รอบ 3 (ข้อ 2): การ์ดบทเรียนหลักแบบใหม่ — สี่เหลี่ยม 16:9 รายละเอียดครบ ═══ */
.cc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.cc-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; box-shadow:var(--sh-1);
  transition:.18s; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.cc-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.cc-thumb{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, hsl(var(--hue,215) 48% 34%), hsl(calc(var(--hue,215) + 30) 52% 48%)); }
.cc-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cc-no{ position:absolute; top:9px; left:9px; z-index:1; background:rgba(255,253,248,.95); color:var(--pine-deep);
  font-family:var(--serif); font-weight:700; font-size:.8rem; border-radius:8px; padding:3px 10px; }
.cc-dur{ position:absolute; right:9px; bottom:9px; z-index:1; background:rgba(31,36,51,.75); color:#fff; font-size:.7rem;
  font-weight:600; padding:2px 8px; border-radius:5px; display:inline-flex; align-items:center; gap:4px; }
.cc-play{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; background:rgba(255,253,248,.94);
  color:var(--pine-deep); display:flex; align-items:center; justify-content:center; font-size:1.2rem; z-index:1; }
.cc-done{ position:absolute; inset:0; background:rgba(47,143,99,.28); z-index:1; display:flex; align-items:center; justify-content:center; }
.cc-done span{ background:var(--ok); color:#fff; font-size:.74rem; font-weight:700; border-radius:var(--pill); padding:4px 13px; display:inline-flex; gap:5px; align-items:center; }
.cc-body{ padding:13px 15px 15px; flex:1; display:flex; flex-direction:column; }
.cc-body h4{ font-size:.95rem; margin:0; line-height:1.35; font-family:var(--serif); }
.cc-desc{ font-size:.78rem; color:var(--ink-3); margin:5px 0 0; line-height:1.5;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cc-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.cc-prog{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:11px; font-size:.72rem; color:var(--ink-3); }
.cc-prog .bar{ flex:1; height:7px; }
.cc-act{ margin-top:11px; }

/* ═══ v1.1.0 รอบ 3 (ข้อ 3-4): ที่มา/เครดิตวิดีโอเสริม ═══ */
.src-line{ display:flex; align-items:center; gap:7px; margin-top:8px; font-size:.75rem; color:var(--ink-3); min-width:0; }
.src-line .ph{ font-size:1rem; color:var(--pine); flex-shrink:0; }
.src-line b{ color:var(--ink-2); font-weight:600; }
.plat-badge{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:var(--pill); flex-shrink:0; }
.plat-youtube{ background:#fde8e8; color:#b91c1c; } .plat-vimeo{ background:#e0f2fe; color:#0369a1; }
.plat-tiktok{ background:#1f2433; color:#fff; } .plat-facebook{ background:#dbeafe; color:#1d4ed8; }
.plat-other{ background:var(--surface-2); color:var(--ink-2); }

/* ═══ v1.1.0 รอบ 3 (ข้อ 1): สื่อประกอบแบบทดสอบ (builder + หน้าทำข้อสอบ) ═══ */
.md-btns{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.md-btn{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; padding:5px 12px; border-radius:var(--pill);
  border:1.5px dashed var(--line); background:var(--surface); color:var(--ink-3); cursor:pointer; font-family:var(--sans); transition:.14s; }
.md-btn:hover{ border-color:var(--accent,var(--pine)); color:var(--accent-dark,var(--pine-dark)); border-style:solid; background:var(--accent-soft,var(--pine-soft)); }
.md-editor{ display:flex; gap:8px; align-items:center; margin-top:8px; padding:10px 12px; border:1.5px solid var(--accent,var(--pine));
  border-radius:var(--r2); background:var(--accent-soft,var(--pine-soft)); flex-wrap:wrap; }
.md-editor .inp{ flex:1; min-width:180px; background:var(--surface); }
.md-prev{ position:relative; margin-top:9px; border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; background:var(--surface-2); max-width:340px; }
.md-prev .rm-md{ position:absolute; top:7px; right:7px; z-index:2; width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(31,36,51,.75); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.md-prev .rm-md:hover{ background:var(--bad); }
.md-prev img{ display:block; width:100%; max-height:200px; object-fit:contain; background:var(--surface-2); }
.md-audio{ display:flex; align-items:center; gap:10px; padding:10px 14px; }
.md-audio .ph{ font-size:1.5rem; color:var(--pine); flex-shrink:0; }
.md-audio audio{ height:34px; max-width:240px; }
.qz-optwrap{ flex:1; min-width:0; }

/* ═══ v1.1.3 (F8.0): หน้าตรวจบทเรียน + กล่องยืนยันของแอดมิน ═══ */
.rv-chk{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px; }
.rv-ci{ display:flex; gap:8px; align-items:flex-start; font-size:.83rem; padding:8px 11px; border-radius:var(--r1); }
.rv-ci.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.rv-ci.warn{ background:var(--warn-soft); color:var(--warn-ink); }
.rv-ci b{ display:block; font-size:.8rem; }
.rv-ci small{ opacity:.85; }
.rv-cover{ width:230px; aspect-ratio:16/9; border-radius:var(--r2); display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; gap:5px; font-size:.79rem; flex:none; }
.rv-cover i{ font-size:1.6rem; }
.rv-cp{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-top:1px dashed var(--line); }
.rv-time{ font-family:ui-monospace,Menlo,monospace; background:var(--pine-soft); color:var(--pine-deep);
  padding:2px 9px; border-radius:var(--pill); font-size:.78rem; flex:none; }
.rv-blk{ padding:10px 0; border-top:1px dashed var(--line); }
.rv-blk:first-of-type{ border-top:none; }
.rv-q{ padding:11px 0; border-top:1px dashed var(--line); }
.rv-q:first-of-type{ border-top:none; }
.rv-opt{ font-size:.8rem; padding:3px 11px; border-radius:var(--pill); background:var(--surface-2); border:1px solid var(--line); }
.rv-opt.right{ background:var(--ok-soft); border-color:#a9d8c1; color:var(--ok-ink); font-weight:600; }
/* แถบตัดสินติดขอบล่างจอ — อนุมัติ/ส่งกลับอยู่ในหน้าตรวจเท่านั้น (D10 = A) */
.rv-bar{ position:sticky; bottom:0; z-index:20; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 16px; margin:16px -4px 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--sh-2); }

/* กล่องยืนยัน/กรอกข้อมูลกลาง (ใช้ในหน้าตรวจ + ถังขยะ) */
.modal-bg{ position:fixed; inset:0; z-index:120; background:rgba(31,36,51,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card{ background:var(--surface); border-radius:var(--r3); max-width:460px; width:100%;
  padding:24px; box-shadow:var(--sh-3); max-height:90vh; overflow-y:auto; overflow-wrap:anywhere;
  white-space:normal; }  /* v1.1.16: กัน white-space:nowrap ที่ inherit มาจาก <td> รอบ modal */

/* ═══ v1.1.3 (F11): การ์ดสุขภาพงานอัตโนมัติบนแดชบอร์ด ═══ */
.job-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.job{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r2); padding:13px 15px; border-left:4px solid var(--ok); }
.job.warn{ border-left-color:var(--warn); }
.job.bad{ border-left-color:var(--bad); }
.job .jn{ font-size:.89rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:7px; }
.job .jt{ font-size:.78rem; color:var(--ink-3); margin-top:2px; }
.job .js{ font-size:.78rem; font-weight:600; margin-top:7px; display:flex; align-items:flex-start; gap:5px; line-height:1.5; }
.job.ok .js{ color:var(--ok-ink); }
.job.warn .js{ color:var(--warn-ink); }
.job.bad .js{ color:var(--bad-ink); }

/* ═══ v1.1.4: กริดหน้าตั้งค่าระบบ — เต็มความกว้าง วางการ์ดข้างกันบนจอกว้าง เรียงซ้อนบนจอแคบ ═══ */
.cfg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:18px; align-items:start; }
@media (max-width:640px){ .cfg-grid{ grid-template-columns:1fr; } }

/* ═══ v1.1.9: ป้าย "แผนผังการใช้งาน" ใต้ช่องกรอก (บอกว่าค่าไปโผล่หน้าไหน) ═══ */
.field-usage{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.field-usage .fu-lbl{ display:inline-flex; align-items:center; gap:3px; font-size:.68rem; font-weight:600; color:var(--ink-4); }
.field-usage .fu-chip{ display:inline-flex; align-items:center; font-size:.68rem; font-weight:600; padding:2px 9px;
  border-radius:var(--pill); background:var(--pine-soft); color:var(--pine-dark); }
.fu-note{ font-size:.74rem; color:var(--ok-ink); background:var(--ok-soft); padding:5px 11px; border-radius:var(--r2);
  margin-top:7px; display:inline-flex; gap:6px; align-items:center; overflow-wrap:anywhere; }

/* ── v1.2.1 (B3): บันทึกร่างอัตโนมัติ — ป้ายสถานะ + แถบกู้คืน ─────────────── */
.itcil-autosave-pill{
    position:fixed; right:18px; bottom:18px; z-index:60;
    padding:8px 14px; border-radius:999px; font-size:.82rem; font-weight:600;
    background:var(--surface); color:var(--ink-2);
    border:1px solid var(--line-2); box-shadow:var(--sh-2);
    opacity:0; transform:translateY(6px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
.itcil-autosave-pill.on{ opacity:1; transform:none; }
.itcil-autosave-pill[data-tone="ok"]{ color:var(--pine-deep); border-color:var(--pine); background:var(--pine-soft); }

.itcil-restore-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:0 0 16px; padding:12px 16px;
    background:var(--warn-soft); color:var(--warn-ink);
    border:1px solid var(--warn); border-radius:var(--r3);
    font-size:.87rem; line-height:1.65;
}
.itcil-restore-bar > span{ flex:1; min-width:200px; }
@media (max-width:640px){
    .itcil-autosave-pill{ right:10px; bottom:10px; font-size:.78rem; }
}

/* ── v1.3.0 (R2-08): ตัวเลือกแบบเลือกได้หลายค่า ─────────────────────────── */
.ms{ position:relative; }
.ms-box{ min-height:40px; border:1.5px solid var(--line-2); border-radius:10px; padding:5px 8px;
    background:var(--surface); display:flex; gap:5px; flex-wrap:wrap; align-items:center; cursor:pointer; }
.ms-box:focus-visible{ outline:2px solid var(--pine); outline-offset:1px; }
.ms-chip{ background:var(--pine-soft); color:var(--pine-deep); border-radius:7px; padding:3px 7px;
    font-size:.78rem; display:inline-flex; align-items:center; gap:5px; max-width:100%; }
.ms-chip > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-chip i{ cursor:pointer; opacity:.65; flex:none; }
.ms-chip i:hover{ opacity:1; }
.ms-ph{ color:var(--ink-3); font-size:.85rem; }
.ms-menu{ position:absolute; z-index:30; top:calc(100% + 5px); left:0; right:0; min-width:210px;
    background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh-3);
    padding:5px; max-height:230px; overflow:auto; }
.ms-menu label{ display:flex; gap:9px; align-items:center; padding:7px 9px; border-radius:7px;
    cursor:pointer; font-size:.86rem; margin:0; }
.ms-menu label:hover{ background:var(--surface-2); }