@font-face { font-family: 'TT';  src: url('./fonts/tt-reg.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT';  src: url('./fonts/tt-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'KVL'; src: url('./fonts/kvl-reg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'KVL'; src: url('./fonts/kvl-bold.woff2')format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-body: 'TT', system-ui, -apple-system, sans-serif;
  --font-head: 'KVL', var(--font-body);
  --navy:    #1A477F;   /* primary — section headers (matches print.css .btn-main base) */
  --navy-d:  #133561;
  --title-bg: #E8EDF2;  /* title bars: light bg + navy text */
  --gold:    #FFB600;
  --teal:    #00A5AD;   /* mytcas teal — meter / secondary brand (NOT the folio accent) */
  --maroon:  #8a2030;   /* "สาขาวิชาที่ใช้สมัคร" accent */

  /* folio editor signature accent — pink (tailwind 'folio'/'folio_bg'), the real accent */
  --folio:      #DA558D;
  --folio-bg:   #FBEEF4;
  --folio-line: #ECD9E2;

  --ink:     #191E23;   /* print.css --s-text */
  --muted:   #828897;   /* dominant production muted grey */
  --line:    #DADADA;   /* tailwind 'border' — warm neutral */
  --soft:    #F5F5F7;   /* tailwind 'light' — page wash / zebra */
  --paper:   #ffffff;
  --canvas:  #525659;   /* print-preview backdrop */

  --ok:      #0B9C23;   /* mytcas success green */
  --warn:    #FF6600;   /* mytcas warning orange */
  --danger:  #EA0C42;   /* mytcas error red */

  /* A4 on screen (≈0.8 of 96dpi). Height keeps 210:297 ratio. */
  --page-w: 760px;
  --page-h: 1075px;
  --page-pad-x: 50px;
  --page-pad-top: 56px;
  --page-pad-bot: 44px;
  /* usable content height inside a page (the bin-pack capacity = 1.0) */
  --content-h: 975px;

  --sidebar-w: 320px;
  --radius: 6px;        /* production is crisp (3px on controls); 6px for larger chrome */
  --radius-sm: 3px;     /* buttons / inputs / cards — matches .btn-main / .t-box */
  --shadow: 0 1px 3px rgba(0,0,0,.15);   /* production .t-box card shadow */
  --shadow-lg: 0 1px 3px rgba(16,24,40,.12), 0 8px 24px rgba(16,24,40,.08);  /* floating A4 sheet */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* author display:flex/etc. otherwise overrides the hidden attribute */
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-head);           /* KVL = default for all short UI / data text */
  color: var(--ink);
  background: #eef1f5;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;     /* crisper text on WebKit/Blink */
  -moz-osx-font-smoothing: grayscale;      /* Firefox on macOS */
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }   /* form controls don't inherit by default */
button { cursor: pointer; }

/* TT = reading face — only the long free-form text the user types */
.free__body { font-family: var(--font-body); }

/* ───────────────── Top bar ───────────────── */
.topbar {
  height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar__brand { display: flex; align-items: center; gap: 12px; }
.topbar__brand > div { padding-top: 2px; }
.topbar__logo { height: 32px; width: auto; display: block; }
.topbar__brand strong { color: var(--navy); letter-spacing: .3px; }
.topbar__sub { color: var(--muted); font-size: 12.5px; margin-left: 8px; }
.topbar__actions { display: flex; align-items: center; gap: 14px; }
.hint { color: var(--muted); font-size: 12.5px; }

/* ───────────────── Layout ───────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: calc(100vh - 54px);
}

/* ───────────────── Sidebar ───────────────── */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.panel {                 /* flat: no outer frame — inner elements carry their own structure */
  padding: 0;
  border: 0;
  background: transparent;
}
.panel__title { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.panel__note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.panel--legend p { font-size: 12.5px; color: #475467; margin: 0 0 6px; }

.field {
  width: 100%; padding: 9px 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.field--num { width: 90px; }
.cap { margin-top: 12px; }
.cap label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }

/* Meter */
.panel--meter { background: transparent; }
.meter__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.meter__count b { font-size: 22px; color: var(--navy); }
.meter__count { font-size: 14px; color: var(--ink); }
.meter__bar { height: 10px; border-radius: 999px; background: #eceff4; overflow: hidden; margin: 10px 0 8px; }
.meter__fill { height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .2s, background .2s; }
.meter__msg { font-size: 12.5px; margin: 0; min-height: 1.2em; }
.is-over .meter__fill { background: var(--danger); }
.is-near .meter__fill { background: var(--warn); }

/* Toggles */
.toggles { display: flex; flex-direction: column; gap: 2px; }
.toggle { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }
.toggle:hover { background: var(--soft); }
.toggle input { width: 16px; height: 16px; accent-color: var(--navy); }
.toggle input:hover, .outline__head input:hover, .msheet__check input:hover { accent-color: var(--teal); }
.toggle .frac { margin-left: auto; font-size: 11px; color: var(--muted); }
.toggle--locked, .toggle--locked input { cursor: default; }
.toggle--locked:hover { background: transparent; }

/* Add buttons */
.addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--soft); }
.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: #eef3fb; }
.btn--add { border-style: dashed; border-color: #c7d0de; color: var(--navy); }
.btn--add:hover { border-color: var(--navy); background: #eef3fb; }

/* ── content outline (fixed order, mirrors port-01) ── */
.outline { display: flex; flex-direction: column; gap: 6px; }
.outline__sec { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.outline__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fafbfd; }
.outline__no { width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.outline__name { font-size: 13px; color: var(--navy-d); flex: 1; }
.outline__opt { font-size: 10px; color: var(--muted); background: #eef1f6; padding: 1px 6px; border-radius: 999px; }
.outline__head input { width: 16px; height: 16px; accent-color: var(--navy); }
.outline__body { padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.outline .toggle { font-size: 13px; padding: 4px; }
.outline__items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 7px; }
.outline__item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.outline__item:hover { background: var(--soft); }
.outline__item.is-sel { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.outline__item > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline__item button { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.outline__item button:hover { color: var(--danger); background: #fdeaea; }
.outline__empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 0 0 7px; }
.outline__add { width: 100%; border: 1px dashed #c7d0de; background: #fff; color: var(--navy); border-radius: 7px; padding: 7px; font-size: 12.5px; }
.outline__add:hover { border-color: var(--navy); background: #eef3fb; }
/* หมวดย่อย 4.1–4.5 ภายใต้หมวด 4 ผลงาน */
.outline__sub { padding-top: 9px; margin-top: 9px; border-top: 1px dashed var(--line); }
.outline__sub:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.outline__subhead { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--navy-d); font-weight: 700; margin-bottom: 6px; }
.outline__subhead > span:nth-child(2) { flex: 1; }
.outline__subno { font-size: 11px; font-weight: 700; color: var(--navy); background: #eef1f6; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }
.outline__open { border: 0; background: transparent; color: var(--navy); font-size: 12px; font-weight: 600; padding: 5px 4px 0; cursor: pointer; }
.outline__open:hover { text-decoration: underline; }
.free__link { color: var(--navy-d); font-size: 12.5px; margin-top: 2px; word-break: break-all; }

/* ───────────────── Canvas (paper) ───────────────── */
.canvas {
  background: var(--canvas);
  overflow-y: auto;
  padding: 28px 0 60px;
}
.pages { display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* page wrapper: invisible on desktop; becomes the scaled swipe slide on mobile preview */
.pwrap { display: contents; }

/* A4 page */
.page {
  width: var(--page-w);
  height: var(--page-h);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;            /* clip content ที่ล้นขอบกระดาษ — ให้ตรงกับ print (ตรงกับ tcas-student) */
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bot);
  display: flex; flex-direction: column;
}
.page--first { padding-top: 28px; }     /* no runhead on page 1 → pull cover up, save space */
.page__runhead {
  position: absolute; top: 16px; left: var(--page-pad-x); right: var(--page-pad-x);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.page__runhead img { height: 16px; opacity: .9; }
.page__foot {
  position: absolute; bottom: 16px; right: var(--page-pad-x);
  font-size: 11px; color: var(--muted);
}
.page__content { flex: 1; min-height: 0; }

/* ───────────────── Blocks ───────────────── */
.block {
  position: relative;
  overflow: hidden;            /* fixed-height slot — the heart of pagination */
  border-radius: 6px;          /* must match .sec radius, else the parent clip crops the section corners */
}
.block--bleed { overflow: visible; border-radius: 0; }   /* cover: don't crop the photo corner */
.block + .block { margin-top: 14px; }
.block--free { outline: 1px dashed transparent; outline-offset: 3px; cursor: pointer; }
.block--free:hover { outline-color: #cdd6e4; }
.block--free.is-selected { outline: 2px solid var(--teal); outline-offset: 3px; }
.block.is-overflow { outline: 2px solid var(--danger) !important; }

/* overflow + char-guide chips */
.block__chip {
  position: absolute; right: 6px; top: 6px; z-index: 5;
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.block__chip.is-danger { border-color: var(--danger); color: var(--danger); background: #fff5f5; }
.block__chip button {
  border: 0; background: var(--danger); color: #fff; border-radius: 6px;
  font-size: 10.5px; padding: 2px 7px;
}
.block__fade {              /* visual cue that content is clipped */
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}
.block.is-overflow .block__fade { display: block; }

/* ── structured section: full-width navy header + dense bordered cells ── */
/* navy frame on the OUTER group; inner sections are borderless & stacked continuously */
.datagroup { border: 1px solid var(--navy); border-radius: 6px; overflow: hidden; }
.sec + .sec { border-top: 1px solid var(--navy); }   /* divider between stacked sections */
.sec__head { background: var(--title-bg); color: var(--navy); font-weight: 700; font-size: 11.5px; padding: 4px 10px 3px; border-bottom: 1px solid var(--navy); }
.sec__note { color: #c0392b; font-weight: 400; font-size: 11px; margin-left: 8px; }
.row { display: flex; }
.row + .row { border-top: 1px solid var(--line); }
.cell {
  flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 11.5px; line-height: 1.45;
  display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
}
.cell + .cell { border-left: 1px solid var(--line); }
.cell__k  { color: var(--muted); }
.cell__v  { color: var(--navy-d); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.cell__vr { color: var(--navy-d); font-weight: 700; margin-left: auto; }
.cell .den { color: var(--muted); font-weight: 400; }
.cell .mid { color: var(--muted); font-weight: 400; margin: 0 7px; }
.cell .ok  { color: var(--ok); margin-left: 6px; }

/* aligned columns: credit/GPA (grades) and score/check (uni scores) line up across rows */
.cell--grade { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; flex: 1 1 0; }
.cell--score { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; column-gap: 10px; flex: 1 1 0; }
.cell--empty { flex: 1 1 0; }
.cell--grade .cell__k, .cell--score .cell__k { overflow: hidden; text-overflow: ellipsis; }
.cell__credit, .cell__gpa, .cell__score { color: var(--navy-d); font-weight: 700; text-align: right; white-space: nowrap; }
.cell__chk { text-align: right; align-self: center; line-height: 0; }
.okimg { width: 13px; height: 13px; vertical-align: -2px; }
.cell__awn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }

/* Free content: navy CATEGORY header (level 1) + numbered ITEMS (level 2) */
.free__cat {
  display: inline-flex; align-items: center;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 13px;
  padding: 5px 14px; border-radius: 7px;
}
/* หัวหมวด = ป้าย navy + ไอคอน i (คำอธิบายโชว์ตอนแก้ไข, ซ่อนตอน print) */
.free__cathead { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.free__i {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--navy); background: #fff; color: var(--navy);
  font-family: var(--font-head); font-size: 12px; font-weight: 700; font-style: italic; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.free__i:hover { background: var(--navy); color: #fff; }
.free__help {
  background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: 6px; padding: 6px 11px; font-size: 11.5px; color: #475467; margin: -4px 0 12px;
}
.free__item { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.free__num { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--navy-d);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.free__title { font-weight: 700; color: var(--navy-d); font-size: 15px; flex: 1; }
.free__title small { color: var(--muted); font-weight: 500; }
.free__label { color: var(--teal); font-weight: 600; font-size: 12.5px; margin-top: 8px; }
/* ป้ายฟิลด์ทั่วไป (รายละเอียด/ภาพประกอบ/คำตอบ) = ฮินต์ตอนแก้ — ซ่อนตอน resting/print ประหยัด 1 บรรทัด/บล็อก (ตรงกับ tcas-student), โชว์เฉพาะตอนเลือกบล็อก · ป้ายที่มีความหมาย (ผลรางวัล/ลิงก์/Reflection) โชว์เสมอ */
.free__label--hint { display: none; }
.block--free.is-selected .free__label--hint { display: block; }
/* caption ของสแกน (หนังสือรับรอง ฯลฯ) — บอกว่าภาพคืออะไร โชว์เสมอ (รวมตอน print) */
.free__caption { color: var(--teal); font-weight: 600; font-size: 12.5px; margin-top: 8px; }
.free__body { color: #344054; font-size: 12.5px; margin-top: 2px; white-space: pre-wrap; line-height: 1.5; }
/* rich-text body (เรียงความ/คำตอบ หมวด 5) = HTML จริง — เลิก pre-wrap, จัดย่อหน้า/ลิสต์ */
.free__body--rich { white-space: normal; }
.free__body--rich p { margin: 0 0 6px; }
.free__body--rich p:last-child { margin-bottom: 0; }
.free__body--rich ul, .free__body--rich ol { margin: 4px 0 6px; padding-left: 22px; }
.free__body--rich li { margin: 1px 0; }
/* meta strip: ประเภท (ไอคอนสี+พื้นสี) · ระดับ · ค่าใช้จ่าย · ช่วงเวลา · ชั่วโมง · หน่วยงาน */
.free__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 5px 0 2px; }
.atag, .ltag, .ctag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; line-height: 1.45; }
.atag svg { flex-shrink: 0; }
.ltag { color: var(--navy); background: #E8EDF2; }
.ctag--yes { color: var(--warn); background: #FFE7D6; }
.ctag--no  { color: var(--ok);   background: #DCF3E1; }
.mtag { font-size: 11.5px; color: var(--ink); }
.mtag--muted { color: var(--muted); }
.mtag b { color: var(--teal); font-weight: 600; }
.free__extra { color: var(--ink); font-size: 12px; margin-top: 4px; }
.free__extra .okimg, .free__verify .okimg { width: 13px; height: 13px; vertical-align: -2px; }
.free__verify { margin-left: 4px; }
/* ป้าย TCAS Verified ต่อท้ายชื่อผลงาน — โตกว่าหน่อยให้เห็นชัด */
.free__vbadge { display: inline-block; margin-left: 5px; line-height: 0; }
.free__vbadge .okimg { width: 16px; height: 16px; vertical-align: -3px; }
/* required-but-unset chip (ประเภท/ระดับ/ค่าใช้จ่าย) — edit prompt, hidden on print */
.chip--required { color: var(--danger) !important; background: #fff !important; border: 1px dashed var(--danger); font-weight: 700; }
/* ชิป meta ที่กดเลือกได้ (เดสก์ท็อป) + popover ตัวเลือก */
.meta-edit { cursor: pointer; }
.atag.meta-edit:hover, .ltag.meta-edit:hover, .ctag.meta-edit:hover { box-shadow: 0 0 0 2px rgba(26,71,127,.25); }
.chip--required.meta-edit:hover { background: #fff5f5 !important; }
.metapop {
  position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lg); padding: 5px;
  display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; min-width: 168px;
}
.metapop__opt { border: 0; background: transparent; text-align: left; padding: 7px 12px; border-radius: 6px;
  font-size: 13px; color: var(--ink); white-space: nowrap; font-family: inherit; }
.metapop__opt:hover { background: var(--soft); }
.metapop__opt.is-on { background: #eef3fb; color: var(--navy); font-weight: 700; }
.metapop__clear { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; margin-top: 2px; }
.blocktools__wc { font-size: 12px; color: var(--ink); white-space: nowrap; }
/* rich-text format buttons (หนา/เอียง/bullet/เลขลำดับ) — toolbar ลอย (เดสก์ท็อป) */
.blocktools__fmt { display: flex; gap: 2px; }
.blocktools .fmtbtn { min-width: 28px; font-size: 13.5px; }
.blocktools .fmtbtn i { font-style: italic; }
/* rich editor ในชีต/พาเนลแก้ไข (มือถือ + เดสก์ท็อป) */
.msheet__fmt { display: flex; gap: 6px; margin-bottom: 8px; }
.msheet__fmt .fmtbtn { width: 42px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 15px; color: var(--ink); }
.msheet__fmt .fmtbtn:hover { background: var(--soft); }
.msheet__fmt .fmtbtn i { font-style: italic; }
.msheet__rich { min-height: 120px; max-height: 42vh; overflow-y: auto; font-family: var(--font-body); line-height: 1.55; }
.msheet__rich p { margin: 0 0 6px; }
.msheet__rich ul, .msheet__rich ol { margin: 4px 0; padding-left: 22px; }
.free__wc { font-size: 11px; color: var(--muted); margin-top: 6px; }
/* "ภาพประกอบ สูงสุดไม่เกิน 6 รูป" — โชว์เฉพาะตอนเลือก/แก้ไขบล็อก, ไม่พิมพ์ออก (feedback #6) */
.free__imgnote { display: none; font-weight: 400; font-size: 11px; color: var(--muted); }
.block--free.is-selected .free__imgnote { display: inline; }
/* ข้อ Verify: โน้ตล็อก (screen-only) + Reflection (เด็กเขียนเองได้) (feedback #5) */
.free__locknote { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--navy);
  background: #EAF0F8; border: 1px solid #d3e0f0; border-radius: 6px; padding: 3px 9px; }
.free__refl { background: #FBFCFE; border-radius: 4px; }
/* คะแนนที่เพิ่มเอง (ยังไม่ verify): ชื่อ/คะแนนแก้ได้ + ปุ่มลบ (ปุ่มไม่พิมพ์ออก) (feedback #7) */
.cell--escustom .cell__k { color: var(--navy-d); font-weight: 600; }
.escore__del { border: 0; background: transparent; color: var(--muted); font-size: 14px;
  line-height: 1; padding: 0; cursor: pointer; align-self: center; justify-self: end; }
.escore__del:hover { color: var(--danger); }
/* outline: ปุ่มแสดง/ซ่อนข้อ Verify + เครื่องหมาย ✓ (feedback #5) */
.outline__eye { border: 0; background: transparent; color: var(--muted); padding: 0 4px; line-height: 1; display: inline-flex; align-items: center; cursor: pointer; }
.outline__item .outline__eye:hover { color: var(--navy); background: #eef3fb; }
.outline__eye.is-off { color: var(--danger); }
.outline__eye svg { display: block; }
.outline__vchk { display: inline-flex; align-items: center; flex-shrink: 0; }
.outline__vchk .okimg { width: 14px; height: 14px; }
.outline__item.is-hidden { opacity: .55; }
.outline__item.is-hidden > span { text-decoration: line-through; }
/* toast (ลบข้อ Verify ไม่ได้ ฯลฯ) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: #111827; color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 80; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── course picker: clickable field + popup (เลือกครั้งเดียว → ล็อก) ── */
.coursefield { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.coursefield.is-locked { cursor: default; background: #f1f3f7; }
.coursefield__txt { font-weight: 700; color: var(--navy-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coursefield__txt--empty { color: var(--muted); font-weight: 600; }
.coursefield__chev, .coursefield__lock { color: var(--muted); flex-shrink: 0; }
.coursefield__note { font-size: 11.5px; color: var(--muted); margin: 8px 2px 0; line-height: 1.4; }
/* ก่อนเลือกสาขา: เหลือแต่ popup บนพื้นหลังเทา — ซ่อน sidebar + พรีวิว A4 + bottom bar + ปุ่มปิด popup */
body.no-course .layout { grid-template-columns: 1fr; }
body.no-course .sidebar,
body.no-course .pages,
body.no-course .mbar { display: none !important; }
body.no-course .cmodal__close { display: none; }
.cmodal { position: fixed; inset: 0; background: rgba(15,22,38,.5); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.cmodal__panel { background: #fff; border-radius: var(--radius); width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column; padding: 18px; box-shadow: var(--shadow-lg); }
.cmodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cmodal__head strong { font-size: 16px; color: var(--navy-d); }
.cmodal__close { border: 0; background: transparent; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.cmodal__count { font-size: 12px; color: var(--muted); margin: 8px 2px; }
.cmodal__list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cmodal__note { font-size: 12px; color: var(--warn); margin: 12px 2px 0; }
.cmodal__empty { color: var(--muted); font-style: italic; padding: 16px; text-align: center; }
.ccard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.ccard:hover { border-color: var(--teal); background: var(--soft); }
.ccard__logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.ccard__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ccard__name { font-weight: 700; color: var(--navy-d); font-size: 13.5px; line-height: 1.3; }
.ccard__prog { font-size: 12px; color: var(--ink); line-height: 1.35; }
.ccard__cap { font-size: 11px; color: var(--muted); }
.ccard__pick { color: var(--teal); font-weight: 700; font-size: 13px; flex-shrink: 0; }
[contenteditable] { outline: none; }
[contenteditable]:focus-visible { background: #fffdf4; box-shadow: 0 0 0 2px #ffe9a8 inset; border-radius: 4px; }
[contenteditable][data-placeholder]:empty::before {   /* real placeholder, not text content */
  content: attr(data-placeholder);
  color: #9aa4b2;
  pointer-events: none;
}

/* image groups — frames carry the aspect ratio, image fits into the frame */
.imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.imgs--feature { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
/* big image has no fixed ratio: it stretches to the full height of the small-image grid */
.frame--featmain { aspect-ratio: auto; }
.frame--featmain img { position: absolute; inset: 0; }
.feat-side { display: grid; gap: 10px; }
.feat-side--2 { grid-template-columns: 1fr; }       /* 2 small stacked */
.feat-side--4 { grid-template-columns: 1fr 1fr; }   /* 4 small in 2×2 */
.frame {
  position: relative; width: 100%; background: #eef1f5; border-radius: 6px; overflow: hidden;
}
.frame--page { max-height: calc(var(--content-h) - 100px); }   /* full-page scan: leave room for header + caption */
/* contain mode: white background so the empty area prints clean (image only) */
.frame--contain { background: #fff; }
/* transparency checkerboard shows ONLY while the block is active → marks the empty area, never prints */
.block--free.is-selected .frame--contain {
  background:
    linear-gradient(45deg,#e9edf3 25%,transparent 25%,transparent 75%,#e9edf3 75%) 0 0/16px 16px,
    linear-gradient(45deg,#e9edf3 25%,#f4f6fa 25%,#f4f6fa 75%,#e9edf3 75%) 8px 8px/16px 16px;
}
.frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.frame--contain img { object-fit: contain; }
.frame { cursor: pointer; }     /* click a frame to choose a local image */

/* image controls inside the floating toolbar */
.blocktools__img select {
  background: #1f2937; color: #fff; border: 1px solid #374151; border-radius: 6px;
  height: 28px; font-size: 12px; padding: 0 4px; font-family: inherit;
}
.blocktools__img #fitBtn { font-size: 12px; padding: 0 8px; }

/* ── Cover header (first page only) ── */
.cover { position: relative; padding-right: 148px; min-height: 166px; }
.cover__photo {                       /* top-right, NO heavy border */
  position: absolute; top: 0; right: 0; width: 130px; height: 164px;
  object-fit: cover; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.10);   /* hairline so all 4 rounded corners read evenly */
}
.cover__top { display: flex; align-items: center; gap: 16px; }
.cover__logo { height: 56px; width: auto; flex-shrink: 0; }
.cover__title { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.cover__year { color: var(--navy); white-space: nowrap; }
.cover__applylabel { margin-top: 10px; font-weight: 700; color: var(--ink); font-size: 15px; }
.cover__major { display: flex; gap: 14px; margin-top: 10px; align-items: flex-start; }
.cover__unilogo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.cover__majorinfo { font-size: 13.5px; line-height: 1.5; }
.cover__major1 { font-weight: 700; color: var(--navy-d); }
.cover__major2 { color: var(--ink); }
.cover__major3 { color: var(--muted); font-size: 12.5px; }

/* ───────────────── Floating block toolbar ───────────────── */
.blocktools {
  position: fixed; z-index: 50;
  background: #111827; color: #fff; border-radius: 10px; padding: 5px;
  display: flex; align-items: center; gap: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.blocktools button {
  border: 0; background: transparent; color: #fff; border-radius: 7px;
  min-width: 30px; height: 30px; padding: 0 8px; font-size: 14px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.blocktools button svg { display: block; }
.blocktools button:hover { background: #374151; }
.blocktools__pct { font-size: 11.5px; color: #cbd5e1; padding: 0 8px; white-space: nowrap; }
.blocktools__pct b { color: #fff; font-weight: 700; }
.blocktools__pct .warn { color: #fbbf24; }
.blocktools__group { display: flex; gap: 2px; }
.blocktools__group button.is-active { background: var(--gold); color: var(--navy-d); font-weight: 700; }
.blocktools__sep { width: 1px; height: 22px; background: #374151; margin: 0 3px; }
.blocktools button.is-danger:hover { background: var(--danger); }

/* image button group: [−][picture][+] */
.imggroup { display: inline-flex; align-items: center; background: #374151; border-radius: 7px; overflow: hidden; }
#grpImg .imggroup__btn:hover { background: #4b5563; }
.imggroup__icon { display: inline-flex; align-items: center; justify-content: center; color: #cbd5e1; padding: 0 5px; align-self: stretch; border-left: 1px solid #4b5563; border-right: 1px solid #4b5563; }
.imggroup__icon svg { display: block; }

/* delete confirmation popover (red) */
.delpop {
  position: fixed; z-index: 60;
  background: var(--danger); color: #fff; border-radius: 8px;
  padding: 6px 8px 6px 12px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.delpop::before { content: ''; position: absolute; top: -5px; right: 22px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--danger); }
.delpop--up::before { top: auto; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--danger); }
.delpop__msg { white-space: nowrap; }
.delpop__yes { background: #fff; color: var(--danger); border: 0; border-radius: 6px; padding: 3px 11px; font-weight: 700; font-size: 12px; cursor: pointer; }
.delpop__no { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.delpop__no:hover { background: rgba(255, 255, 255, .12); }

/* over-cap banner */
.overbanner {
  position: sticky; top: 0; z-index: 10;
  background: #fff1f1; color: var(--danger); border: 1px solid #f6caca;
  border-radius: 8px; padding: 10px 14px; margin: 0 auto 4px; width: var(--page-w);
  font-size: 13px; font-weight: 500; display: none;
}
.overbanner.show { display: block; }

/* ───────────────── Mobile (≤768px) ─────────────────
   Phone flow: sidebar = home checklist (full width) · bottom bar carries the
   page meter at all times · preview = full-screen swipe pager (pages scaled
   with --pz, pagination itself is viewport-independent via the sandbox) ·
   editing happens in a bottom sheet, never on the A4 page. */
.mbar, .mpvhead, .mscrim, .msheet { display: none; }

@media (max-width: 768px) {
  :root { --mbar-h: calc(58px + env(safe-area-inset-bottom)); --pz: 0.46; }

  .topbar { padding: 0 12px; }
  .topbar__sub { display: none; }

  .layout { display: block; height: auto; }
  .sidebar { border-right: 0; padding: 14px 14px calc(var(--mbar-h) + 18px); min-height: calc(100vh - 54px); }
  .canvas { display: none; }                 /* paper shows only in preview mode */
  .panel--meter { display: none; }           /* the bottom bar carries the meter */
  .blocktools { display: none !important; }  /* desktop floating toolbar → replaced by the sheet */

  /* comfortable touch targets */
  .outline__head { padding: 11px 12px; }
  .outline__item { padding: 10px; font-size: 13.5px; }
  .outline__item button { font-size: 18px; padding: 0 8px; }
  .outline__add { padding: 11px; font-size: 13.5px; }
  .outline .toggle { padding: 8px 6px; }

  /* ── bottom meter bar ── */
  .mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: var(--mbar-h); padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line);
    align-items: center; gap: 12px;
  }
  .mbar__meter { flex: 1; min-width: 0; }
  .mbar__nums { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--ink); }
  .mbar__nums b { font-size: 17px; color: var(--navy); }
  .mbar__msg { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar__bar { height: 8px; border-radius: 999px; background: #eceff4; overflow: hidden; margin-top: 4px; }
  .mbar__fill { height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .2s, background .2s; }
  .mbar.is-over .mbar__fill { background: var(--danger); }
  .mbar.is-near .mbar__fill { background: var(--warn); }
  .mbar.is-over .mbar__msg { color: var(--danger); font-weight: 600; }
  .mbar.is-near .mbar__msg { color: var(--warn); }
  .mbar__btn {
    flex-shrink: 0; border: 0; background: var(--navy); color: #fff;
    font-weight: 600; font-size: 13.5px; padding: 10px 16px; border-radius: 9px;
  }

  /* ── preview mode (body.m-preview) ── */
  body.m-preview { overflow: hidden; }
  body.m-preview .mpvhead {
    display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 36;
    height: 48px; align-items: center; gap: 10px; padding: 0 4px 0 14px;
    background: #fff; border-bottom: 1px solid var(--line);
  }
  .mpvhead__title { font-weight: 700; color: var(--navy); font-size: 14px; white-space: nowrap; }
  .mpvhead__hint { flex: 1; text-align: right; color: var(--muted); font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mpvhead__close { border: 0; background: transparent; font-size: 17px; color: var(--ink); padding: 12px 14px; }

  body.m-preview .canvas {
    display: flex; flex-direction: column; position: fixed; z-index: 35;
    top: 48px; left: 0; right: 0; bottom: var(--mbar-h);
    padding: 0; overflow: hidden;
  }
  body.m-preview .overbanner { width: auto; margin: 10px 12px 0; }
  body.m-preview .pages {
    flex: 1; min-height: 0; flex-direction: row; align-items: center; gap: 16px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-inline: max(14px, calc((100vw - 760px * var(--pz)) / 2));
  }
  body.m-preview .pwrap {
    display: block; flex: 0 0 auto; scroll-snap-align: center;
    width: calc(760px * var(--pz)); height: calc(1075px * var(--pz));
  }
  body.m-preview .page { transform: scale(var(--pz)); transform-origin: 0 0; }
  /* a tap on a block opens the edit sheet — never focus the on-page editor */
  body.m-preview .page [contenteditable] { pointer-events: none; }

  /* ── edit sheet (bottom) ── */
  .mscrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(15, 23, 42, .45); }
  .msheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px);
    background: #fff; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  }
  .msheet__head { display: flex; align-items: center; gap: 2px; padding: 8px 14px 8px 2px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .msheet__back { border: 0; background: transparent; font-size: 20px; padding: 8px 12px; color: var(--navy); }
  .msheet__headinfo { min-width: 0; }
  .msheet__title { font-weight: 700; font-size: 15px; color: var(--navy-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msheet__meta { font-size: 11.5px; color: var(--muted); }
  .msheet__meta b { color: var(--navy); }
  .msheet__warn { color: var(--danger); font-weight: 600; }
  .msheet__body { overflow-y: auto; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
  .msheet__field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
  /* 16px inputs → iOS Safari won't auto-zoom on focus */
  .msheet__field input.field, .msheet__field textarea.field, .msheet__imgopts select { font-size: 16px; }
  .msheet__field textarea.field { font-family: var(--font-body); line-height: 1.55; resize: vertical; min-height: 110px; }
  .msheet__imghead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
  .msheet__imghead label { margin: 0; }
  .msheet__step { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .msheet__step button { border: 0; background: #fff; width: 40px; height: 32px; font-size: 16px; color: var(--navy); }
  .msheet__step button + button { border-left: 1px solid var(--line); }
  .msheet__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
  .msheet__thumbs:empty { display: none; }
  .msimg { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #eef1f5; padding: 0; aspect-ratio: 1; }
  .msimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .msheet__imgopts { display: flex; gap: 8px; margin-top: 10px; }
  .msheet__imgopts select { flex: 1; min-width: 0; }
  .msheet__note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
  .msheet__actions { display: flex; gap: 8px; }
  .msheet__actions .btn { flex: 1; padding: 11px 6px; font-size: 13px; }
  .msheet__del { border-color: #f3b9b9; color: var(--danger); }
  /* standardized meta fields in the edit sheet */
  #msMetaWrap { display: flex; flex-direction: column; gap: 12px; }
  #msKindExtra { display: flex; flex-direction: column; gap: 12px; }
  #msKindExtra:empty { display: none; }
  .msheet__metarow { display: flex; gap: 10px; }
  .msheet__metarow > .msheet__mcol { flex: 1; min-width: 0; }
  .msheet__mcol > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
  #msMetaWrap select.field, #msMetaWrap input.field { font-size: 16px; width: 100%; }
  .req { color: var(--danger); }
  .seg { display: flex; gap: 8px; }
  .seg button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: 9px; font-size: 13px; color: var(--ink); }
  .seg button.is-on { border-color: var(--teal); background: #e6f6f7; color: var(--teal); font-weight: 700; }
  .msheet__check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
  .msheet__check input { width: 18px; height: 18px; accent-color: var(--navy); }
  .msheet__reqnote { color: var(--danger); font-size: 12px; margin: 0; }
  .msheet__wc { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
  /* ข้อ Verify ในชีตแก้ไข: โน้ตล็อก + คำอธิบายหมวด + ฟิลด์ที่ถูกล็อก (feedback #5/#6) */
  .msheet__locknote { font-size: 12px; color: var(--navy); background: #EAF0F8; border: 1px solid #d3e0f0; border-radius: 8px; padding: 9px 11px; margin: 0; }
  .msheet__kindhelp { font-size: 12px; color: #475467; background: var(--soft); border-left: 3px solid var(--navy); border-radius: 6px; padding: 8px 11px; margin: 0; }
  .msheet__field input:disabled, .msheet__field textarea:disabled,
  #msMetaWrap select:disabled, #msMetaWrap input:disabled {
    background: #f1f3f7; color: var(--muted); -webkit-text-fill-color: var(--muted); cursor: not-allowed;
  }
  .seg button:disabled { opacity: .55; cursor: not-allowed; }
}

/* ───────────────── Desktop edit panel (≥769px) ─────────────────
   ใช้ markup ชุดเดียวกับชีตมือถือ (#mSheet) จัดเป็นพาเนลซ้าย "เลื่อนมาทับ" sidebar
   (A4 อยู่กับที่ อัปเดตสด · style เนื้อหาซ้ำกับมือถือโดยตั้งใจ — แยก media query กันชน) */
@media (min-width: 769px) {
  body.has-panel .blocktools { display: none !important; }     /* พาเนลแทน toolbar ลอย */

  /* พาเนลทับ sidebar ด้านซ้าย เลื่อนเข้า–ออก (sidebar อยู่ใต้, โผล่กลับเมื่อปิด) */
  .msheet {
    display: flex !important; flex-direction: column;
    position: fixed; top: 54px; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 46;
    background: #fff;
    box-shadow: 8px 0 24px rgba(16,24,40,.10);
    transform: translateX(-100%); pointer-events: none;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    max-height: none;
  }
  body.has-panel .msheet { transform: translateX(0); pointer-events: auto; }
  /* header = แถบ navy + ตัวหนังสือขาว (แยกพาเนลออกจาก sidebar ให้ชัด) */
  .msheet__head { display: flex; align-items: center; gap: 2px; padding: 12px 14px 12px 4px; background: var(--navy); flex-shrink: 0; }
  .msheet__back { border: 0; background: transparent; font-size: 20px; padding: 6px 12px; color: #fff; cursor: pointer; }
  .msheet__back::before { content: '✕'; }                      /* เดสก์ท็อป: ปุ่มปิด (มือถือใช้ลูกศรย้อนกลับ) */
  .msheet__back { font-size: 0; }
  .msheet__back::before { font-size: 17px; }
  .msheet__back:hover { background: rgba(255, 255, 255, .14); border-radius: 7px; }
  .msheet__headinfo { min-width: 0; }
  .msheet__title { font-weight: 700; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msheet__meta { font-size: 11.5px; color: rgba(255, 255, 255, .72); }
  .msheet__meta b { color: #fff; }
  .msheet__warn { color: #FFD27A; font-weight: 600; }
  .msheet__body { overflow-y: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 14px; }
  .msheet__field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
  .msheet__field textarea.field { font-family: var(--font-body); line-height: 1.55; resize: vertical; min-height: 96px; }
  .msheet__imghead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
  .msheet__imghead label { margin: 0; }
  .msheet__step { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .msheet__step button { border: 0; background: #fff; width: 36px; height: 30px; font-size: 15px; color: var(--navy); }
  .msheet__step button + button { border-left: 1px solid var(--line); }
  .msheet__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
  .msheet__thumbs:empty { display: none; }
  .msimg { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #eef1f5; padding: 0; aspect-ratio: 1; cursor: pointer; }
  .msimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .msheet__imgopts { display: flex; gap: 8px; margin-top: 10px; }
  .msheet__imgopts select { flex: 1; min-width: 0; }
  .msheet__note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
  .msheet__actions { display: flex; gap: 8px; }
  .msheet__actions .btn { flex: 1; padding: 9px 6px; font-size: 13px; }
  .msheet__del { border-color: #f3b9b9; color: var(--danger); }
  #msMetaWrap { display: flex; flex-direction: column; gap: 12px; }
  #msKindExtra { display: flex; flex-direction: column; gap: 12px; }
  #msKindExtra:empty { display: none; }
  .msheet__metarow { display: flex; gap: 10px; }
  .msheet__metarow > .msheet__mcol { flex: 1; min-width: 0; }
  .msheet__mcol > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
  #msMetaWrap select.field, #msMetaWrap input.field { width: 100%; }
  .req { color: var(--danger); }
  .seg { display: flex; gap: 8px; }
  .seg button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: 8px; font-size: 13px; color: var(--ink); }
  .seg button.is-on { border-color: var(--teal); background: #e6f6f7; color: var(--teal); font-weight: 700; }
  .msheet__check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
  .msheet__check input { width: 18px; height: 18px; accent-color: var(--navy); }
  .msheet__reqnote { color: var(--danger); font-size: 12px; margin: 0; }
  .msheet__wc { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
  .msheet__locknote { font-size: 12px; color: var(--navy); background: #EAF0F8; border: 1px solid #d3e0f0; border-radius: 8px; padding: 9px 11px; margin: 0; }
  .msheet__kindhelp { font-size: 12px; color: #475467; background: var(--soft); border-left: 3px solid var(--navy); border-radius: 6px; padding: 8px 11px; margin: 0; }
  .msheet__field input:disabled, .msheet__field textarea:disabled,
  #msMetaWrap select:disabled, #msMetaWrap input:disabled {
    background: #f1f3f7; color: var(--muted); -webkit-text-fill-color: var(--muted); cursor: not-allowed;
  }
  .seg button:disabled { opacity: .55; cursor: not-allowed; }
}

/* ───────────────── Print ───────────────── */
@media print {
  @page { size: A4; margin: 0; }
  .topbar, .sidebar, .blocktools, .overbanner, .block__chip, .charguide,
  .mbar, .mpvhead, .mscrim, .msheet, .chip--required, .free__wc,
  .free__imgnote, .free__help, .free__i, .free__locknote, .escore__del, .toast, .metapop,
  .free__label--hint { display: none !important; }
  body { background: #fff; }
  .layout { display: block; height: auto; }
  .canvas { background: #fff; overflow: visible; padding: 0; }
  .pages { gap: 0; }
  .page {
    width: 210mm; height: 297mm; box-shadow: none;
    page-break-after: always; break-after: page;
  }
  .block--free, .block--free.is-selected { outline: none !important; }
}