/* ========================================== */
/* ===  ตารางคะแนน (เข้าชุดกับตารางรายชื่อ) === */
/* ========================================== */
/* ตารางเป็น scroll region ของตัวเอง เพื่อให้หัวตารางและแถบบอกบริบท sticky ได้จริง */
.sc-matrix-wrap { overflow: visible !important; }
.score-matrix-scroll {
  position: relative; max-height: min(68vh, 720px); overflow: auto; overscroll-behavior: contain;
  border: 2px solid #d9dfe3; border-radius: 12px; background: #fff;
  scrollbar-gutter: stable;
}
/* width:auto = คอลัมน์ขนาดพอดีเนื้อหา ไม่ยืดเต็มจอตอนรายการน้อย (เพิ่มรายการค่อยขยาย) */
.score-matrix-table { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; background: #fff; }
.score-matrix-table th, .score-matrix-table td { padding: 7px 8px; border-right: none; }
/* มีเส้นแนวตั้งเฉพาะจุดเริ่มกลุ่มข้อมูล ลดภาพแบบ Excel และยังแบ่งหมวดได้ชัด */
.score-matrix-table .sc-cat-start { border-left: 3px solid #cbd3db; }
.score-matrix-table tbody td.sc-cat-start { padding-left: 10px; }

/* แถบบอกบริบทช่องที่กำลังกรอก — เล็ก กระชับ และอยู่เหนือหัวตารางตลอด */
.score-focus-context {
  position: sticky; top: 0; left: 0; z-index: 12; min-height: 42px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.97); color: var(--text-muted);
}
.sc-focus-kicker { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.sc-focus-kicker i { color: var(--primary); font-size: 0.9rem; }
.sc-focus-empty { font-size: 0.8rem; }
.sc-focus-detail { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-main); font-size: 0.82rem; }
.sc-focus-detail[hidden], .sc-focus-empty[hidden] { display: none; }
.sc-focus-student, .sc-focus-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-focus-student { font-weight: 700; }
.sc-focus-divider { width: 1px; height: 18px; flex: 0 0 1px; background: var(--border-color); }
.score-focus-context.has-focus { background: #f7fcfa; border-bottom-color: var(--primary-light-border); }

/* ทุกหมวดใช้ Neutral เดียวกัน — สี Primary สงวนไว้สำหรับช่อง/หัวงานที่กำลังกรอกเท่านั้น */
.sc-group-collect, .sc-group-before, .sc-group-after, .sc-group-mid, .sc-group-final {
  --sc-group-accent: #d8dee6;
  --sc-group-tint: #f8fafc;
}
.score-matrix-table .sc-cat-start[class*="sc-group-"] { border-left-color: var(--sc-group-accent); }
/* หัวตาราง = ไม่ตีเส้น ไม่มีเงา (เอาเงาลอยออก) — คั่นหัว/เนื้อด้วยเส้นล่างเส้นเดียว (ดูที่ tbody tr แรก) */
.score-matrix-table thead th {
  font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
  background: #f8fafc; white-space: nowrap; vertical-align: middle; border: none;
}
.score-matrix-table thead { position: sticky; top: 42px; z-index: 8; }
/* คั่นหัวออกจากเนื้อตาราง = เส้นบางเส้นเดียวเต็มแนว (แทนเงา 3 ชั้นเดิม) วางที่ขอบบนของแถวข้อมูลแรก
   จึงลากยาวครบทุกคอลัมน์รวมช่องตรึงซ้าย/สรุปขวา ไม่ขาดเป็นช่วง */
.score-matrix-table tbody tr:first-child td { border-top: 2px solid #d9dfe3; }
/* หัวหมวดใหญ่ = เรียบเข้าชุดกับเนื้อตาราง (ไม่มีพื้นสี/กรอบ/เงา) บอกลำดับชั้นด้วยตัวหนา + จัดบรรทัดบนให้เท่ากัน */
.score-matrix-table thead .sc-bucket-head {
  color: var(--text-main); background: var(--sc-group-tint, transparent);
  border: none; font-size: 0.92rem; font-weight: 600; white-space: normal; line-height: 1.3;
  vertical-align: top; padding: 10px 10px 8px;
  /* เส้นใต้คลุม "ช่วงกว้างของกลุ่ม" — บอกขอบเขต คะแนนเก็บ / สอบกลางภาค / สอบปลายภาค
     เลือกแบบนี้แทนการตีกรอบเต็ม เพราะกรอบทำให้ภาพรวมหนักและกลับไปเป็นทรงกล่องที่เอาออกไปแล้ว */
  border-top: 2px solid var(--sc-group-accent, #d8dee6);
  border-bottom: 2px solid var(--sc-group-accent, #d8dee6);
}
/* หัวหมวด/ระยะ = ชื่ออยู่บรรทัดเดียวไม่ตัดคำ, %+ตัวเลขอยู่ด้วยกัน — ช่องแคบก็ตกลงบรรทัดใหม่ทั้งก้อน
   หัวกลุ่มคร่อมหลายคอลัมน์ จึงขยายฟอนต์ได้โดยไม่ดันความกว้างตาราง (ต่างจากชื่อรายการ) */
/* ชื่อกลุ่ม / % = แยกบรรทัด "ตายตัว" ทุกกลุ่ม (display:block)
   เดิมเป็น inline-block ปล่อยให้ตกบรรทัดเองตามความกว้าง → กลุ่มกว้าง (หลายรายการ) อยู่บรรทัดเดียว
   แต่กลุ่มแคบ (รายการเดียว) ตก 2 บรรทัด ทำให้เลข % ของแต่ละกลุ่มอยู่คนละระดับ
   บังคับ 2 บรรทัดเสมอ → ชื่อตรงกับชื่อ, % ตรงกับ % ไม่ว่าห้องนั้นจะมีกี่รายการ */
.score-matrix-table thead .sc-bk-name { display: block; white-space: nowrap; font-size: 0.82rem; font-weight: 600; }
/* % = ตัวเลขเขียวเข้มบนพื้นขาว (เลิกใช้พื้นเขียวอ่อน เพราะเด่นจนแย่งสายตาจากชื่อรายการ) */
.score-matrix-table thead .sc-bk-w { display: block; white-space: nowrap; color: var(--primary-deep); margin-top: 1px; }
/* หัวรายการ = สแต็กแนวตั้ง (ชื่อ / เต็ม+เฟือง) เพิ่มความกว้างและ padding ให้ช่องกรอกไม่ชิดเส้นแบ่งกลุ่ม */
.score-matrix-table .sc-item-head { transition: var(--transition-normal); vertical-align: top; width: 82px; min-width: 82px; max-width: 82px; box-sizing: border-box; padding: 7px 5px; }
.score-matrix-table .sc-item-head.sc-cat-start { padding-left: 10px; }
/* ชื่อรายการ — ดูเหมือนข้อความ คลิกพิมพ์แก้ได้ บรรทัดเดียว ยาวเกินเลื่อนในช่อง */
/* padding แนวนอน 0 — คืนพื้นที่ 2px ให้ข้อความ ชดเชยเส้นแบ่งกลุ่มที่หนาขึ้นเป็น 2px
   (ไม่งั้น "ปลายภาค" ในคอลัมน์ที่ติดขอบกลุ่มจะโดน ellipsis) */
.sc-item-name-input { display: block; width: 100%; box-sizing: border-box; text-align: center; text-overflow: ellipsis; font-weight: 600; font-size: 0.74rem; color: var(--text-main); border: 1px solid transparent; border-radius: 5px; padding: 2px 0; background: transparent; }
.sc-item-name-input:hover { border-color: var(--border-color); background: #fff; }
.sc-item-name-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 2px var(--primary-light); text-overflow: clip; }
/* แถวคะแนนเต็ม + ปุ่มตั้งค่า — บรรทัดล่างสุด */
.sc-item-max-row { font-weight: 400; color: var(--text-muted); font-size: 0.66rem; display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 2px; }
/* ตัวคั่น "/" หน้าคะแนนเต็ม (แทนคำว่า "เต็ม" เดิม) — สั้นกว่า 13px และเข้าชุดกับการ์ดมือถือที่ใช้ / อยู่แล้ว */
.sc-item-max-lbl { white-space: nowrap; color: #c7c7cc; }
.sc-item-max-input { width: 30px; text-align: center; font-size: 0.68rem; font-weight: 600; color: var(--text-main); border: 1px solid transparent; border-radius: 4px; padding: 1px 2px; background: transparent; font-variant-numeric: tabular-nums; }
.sc-item-max-input:hover { border-color: var(--border-color); background: #fff; }
.sc-item-max-input:focus { outline: none; border-color: var(--primary); background: #fff; }
.sc-item-max-input::-webkit-outer-spin-button, .sc-item-max-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-item-max-input { -moz-appearance: textfield; appearance: textfield; }
.sc-item-more { border: none; background: transparent; color: #c7c7cc; cursor: pointer; padding: 0; font-size: 0.72rem; line-height: 1; flex-shrink: 0; }
.sc-item-more:hover { color: var(--primary); }
/* % รวมคะแนนเก็บ (อ่านอย่างเดียว บนหัว "คะแนนเก็บ") — หนาเท่าหัวข้อ */
.sc-w-readonly { font-weight: 700; }
/* บล็อกว่าง (ยังไม่มีรายการ) — ปุ่ม + เพิ่มรายการในระยะนั้น */
.score-matrix-table .sc-item-empty { vertical-align: middle; text-align: center; min-width: 52px; }
/* ปุ่มเพิ่มรายการ (จอคอม) — เว้นจากเส้นแบ่ง 4px และกันพื้นที่ในหัวคอลัมน์ไว้ให้ปุ่ม
   จึงมองเห็นเครื่องหมาย + ครบ ไม่ชนเส้น และไม่ทับคะแนนเต็ม/ปุ่มตั้งค่า
   มือถือใช้ .msc-add (ปุ่มยาวมีข้อความ) ไม่เกี่ยวกับสองตัวนี้ */
.sc-add-last, .sc-add-item-btn { position: absolute; right: 4px; z-index: 6; width: 16px; height: 26px; border: 1px solid #b8c2cc; border-radius: 5px; background: #e7eaee; color: #475569; cursor: pointer; font-size: 0.7rem; font-weight: 800; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.sc-add-last:hover, .sc-add-item-btn:hover { background: #d7dde4; border-color: #aeb8c4; color: #334155; }
.score-matrix-table th.sc-item-last, .score-matrix-table th.sc-item-empty { position: relative; }
.score-matrix-table th.sc-item-last { padding-right: 24px; }
.sc-add-last { bottom: 2px; }
/* บล็อกว่างไม่มีแถวชื่อ/คะแนนเต็มมาแย่งที่ → จัดกึ่งกลางแนวตั้งได้ */
.sc-add-item-btn { top: 50%; transform: translateY(-50%); }
.score-matrix-table td.sc-cell-empty { background: #fafbfc; }
/* ป้ายหมวดคะแนน read-only ใน modal เพิ่มรายการ (แทน dropdown — fix ตามบล็อกที่กด) */
.score-bucket-chip { padding: 9px 12px; border-radius: 8px; background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.85rem; border: 1px solid var(--primary-light-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* หัวกลุ่มย่อยระยะ (ก่อน/หลังกลางภาค) ใต้ "คะแนนเก็บ" — โทนอ่อนกว่าหัวหมวด */
/* หัวระยะ = ชิดบน ไม่ใช่กึ่งกลาง — กลุ่มที่มีรายการเดียว (ช่องแคบ) ข้อความจะตกเป็น 2 บรรทัด
   ถ้าจัดกึ่งกลาง บรรทัดแรกของแต่ละกลุ่มจะไม่ตรงกัน (เช่น "หลังกลางภาค" ลอยสูงกว่า "ก่อนกลางภาค") */
.score-matrix-table thead .sc-phase-head { background: var(--sc-group-tint, transparent); color: var(--text-muted); font-weight: 600; font-size: 0.84rem; text-align: center; white-space: normal; line-height: 1.3; vertical-align: top; padding: 8px 10px; border-bottom: 2px solid var(--sc-group-accent, #dfe3e8); }
/* เส้นแบ่งกลุ่มบนแถวหัวหมวด/หัวระยะ — ต้องประกาศซ้ำที่ specificity สูงกว่า
   เพราะ `.sc-bucket-head { border:none }` ชนะ `.sc-cat-start` ทำให้เส้นหายเฉพาะ 2 แถวบน */
.score-matrix-table thead .sc-bucket-head.sc-cat-start,
.score-matrix-table thead .sc-phase-head.sc-cat-start { border-left: 3px solid var(--sc-group-accent, #cbd5e1); }
/* ช่องแก้สัดส่วน % inline บนหัวหมวด (แก้ได้เลยไม่ต้องเปิดตั้งค่า) */
/* ช่อง % = ตัวเลขเปล่าบนพื้นขาว ไม่มีพื้นเขียว (พื้นเขียวเดิมเด่นจนแย่งสายตาจากชื่อรายการ)
   ยังคลิกพิมพ์แก้ได้ — บอกว่าแก้ได้ด้วยพื้นเทาตอน hover แทน */
.sc-weight-input { width: 30px; text-align: center; font-weight: 800; font-size: 0.86rem; color: var(--primary-deep); background: transparent; border: none; border-radius: 6px; padding: 3px 2px; font-variant-numeric: tabular-nums; cursor: text; }
.sc-weight-input:hover { background: #f3f4f6; }
.sc-weight-input:focus { outline: none; background: var(--primary-light); box-shadow: 0 0 0 2px var(--primary-light-border); }
.sc-weight-input::-webkit-outer-spin-button, .sc-weight-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-weight-input { -moz-appearance: textfield; appearance: textfield; }
.score-matrix-table tbody td { border-bottom: 2px solid #e3e7eb; background: #fff; }
.score-matrix-table tbody tr:nth-child(even) td { background: #fbfcfd; }
.score-matrix-table tbody tr:last-child td { border-bottom: none; }
.score-matrix-table tbody tr { transition: background 0.12s ease, opacity 0.16s ease, filter 0.16s ease; }
.score-matrix-table tbody tr:hover td { background: #f6f9f8; }
/* Focus Lane: เด่นเฉพาะแถวนักเรียนปัจจุบัน แถวอื่นคลุมเทาให้อ่านตำแหน่งผิดได้ยาก */
.score-matrix-table.has-active-score tbody tr:not(.is-active-row) { opacity: 0.34; filter: grayscale(1); }
.score-matrix-table.has-active-score tbody tr:not(.is-active-row):hover { opacity: 0.58; }
.score-matrix-table tbody tr.is-active-row td { background: #edf7f2; }
.score-matrix-table tbody tr.is-active-row .is-active-student { background: #e3f3ec; }
.score-matrix-table .is-active-student { font-weight: 700; color: var(--text-main); }
.score-matrix-table thead .sc-item-head.is-active-header {
  background: #e3f3ec; color: var(--text-main); box-shadow: inset 0 -2px 0 var(--primary);
}
.score-matrix-table tbody td.is-active-cell { background: var(--primary-light); }
.score-matrix-table .sc-score-cell { text-align: center; }

/* คอลัมน์ระบุตัวตน (เลขที่/รหัส/ชื่อ) ตรึงซ้าย — โทนเดียวกับหน้าเช็คชื่อ */
.score-matrix-table .sc-c-no   { position: sticky; left: 0;     width: 48px;  min-width: 48px;  text-align: center; z-index: 3; color: var(--text-muted); font-weight: 700; }
.score-matrix-table .sc-c-code { position: sticky; left: 48px;  width: 78px;  min-width: 78px;  text-align: center; z-index: 3; color: var(--text-muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
/* ขอบขวาคอลัมน์ชื่อ = เส้นทึบ (เดิมเป็นเงาฟุ้ง) — เอาเงาออกตามที่ตกลง ยังแยกช่องตรึงซ้ายออกจากคะแนนได้ */
.score-matrix-table .sc-c-name { position: sticky; left: 126px; width: 184px; min-width: 184px; max-width: 184px; z-index: 3; text-align: left; font-weight: 600; color: var(--text-main); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid #d9dfe3; }
.score-matrix-table thead .sc-c-no, .score-matrix-table thead .sc-c-code, .score-matrix-table thead .sc-c-name { z-index: 9; background: #f8fafc; }
.score-matrix-table .sc-c-manage { text-align: center; white-space: nowrap; }
.score-matrix-table .sc-manage-actions { display: flex; justify-content: center; align-items: center; gap: 6px; }

/* อินพุตคะแนน — ลอกจาก .d-code-input (กระชับลงเพื่อลดพื้นที่ว่าง) */
.score-cell-input {
  width: 44px; text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: 7px; padding: 5px 3px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-main); background: transparent;
  transition: background 0.12s ease, outline-color 0.12s ease;
  scroll-margin: 190px 24px 24px 326px;
}
.score-cell-input::placeholder { color: #c7c7cc; font-weight: 400; }
.score-cell-input:hover { background: #eef3f1; border-color: transparent; }
.score-cell-input:focus, .score-cell-input:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px; border-color: transparent;
  background: #fff; box-shadow: none;
}
/* ซ่อนลูกศรขึ้นลงของ input number (กรอกด้วยแป้นพิมพ์ ไม่ต้องใช้ spinner) */
.score-cell-input::-webkit-outer-spin-button,
.score-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-cell-input { -moz-appearance: textfield; appearance: textfield; }

/* คอลัมน์สรุป */
.score-matrix-table .sc-total { text-align: center; font-weight: 700; font-size: 0.82rem; color: var(--text-main); background: #f8fafc; }
.score-matrix-table .sc-att { text-align: center; font-weight: 600; font-size: 0.84rem; }
.score-matrix-table .sc-grade { text-align: center; white-space: nowrap; }
.sc-grade-val { font-weight: 600; font-size: 0.82rem; margin-right: 4px; }
/* สีเกรดตามช่วง — ใช้ tier ร่วมกับมือถือ (mscGradeClass) สี hex ชุดเดียวกัน */
.g-c-high { color: #3b6d11; }
.g-c-mid  { color: #854f0b; }
.g-c-low  { color: #993556; }
.g-c-zero { color: #a32d2d; }
.sc-ov-tag { font-size: 0.62rem; color: var(--color-late-text); font-weight: 700; }

/* select เกรด — เข้าชุด ไม่ใช้ default OS */
.score-grade-sel {
  border: 1px solid var(--border-color); border-radius: 8px; padding: 5px 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-main); background: #fff;
  cursor: pointer; transition: var(--transition-normal);
}
.score-grade-sel:hover { border-color: #d1d1d6; }
.score-grade-sel:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

@media (max-width: 900px) {
  .score-matrix-table th, .score-matrix-table td { padding: 6px; }
  .score-focus-context { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px 9px; }
  .sc-focus-detail { display: grid; width: 100%; gap: 2px; }
  .sc-focus-divider { display: none; }
  .sc-focus-student, .sc-focus-item { width: 100%; }
}

/* ========================================== */
/* ===  PERIOD SETTINGS MODAL  ============= */
/* ========================================== */

.ps-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-chip {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition-normal);
}

.ps-chip:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.ps-chip.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* ปุ่มปรับจำนวนคาบ (+/-) — วงกลม จัดกลาง */
.ps-count-control { display: flex; align-items: center; gap: 12px; }
.ps-count-btn {
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--primary-light-border);
  background: var(--primary-light); color: var(--primary);
  cursor: pointer; transition: var(--transition-normal);
}
.ps-count-btn:hover { filter: brightness(0.97); border-color: var(--primary); }
.ps-count-btn:active { transform: scale(0.92); }
.ps-count-btn.plus {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(29,158,117,0.3);
}
.ps-count-btn.plus:hover { background: var(--primary-hover); filter: none; }
.ps-count-input {
  width: 56px; height: 34px;
  text-align: center; font-weight: 800; font-size: 1rem;
  color: var(--primary); font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border-color); border-radius: 10px;
  background: var(--bg-card);
}
.ps-count-input:focus { outline: none; border-color: var(--border-color); box-shadow: none; }
/* ซ่อนลูกศรขึ้นลงของ input number (ซ้ำซ้อนกับปุ่ม +/-) */
.ps-count-input::-webkit-outer-spin-button,
.ps-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-count-input { -moz-appearance: textfield; appearance: textfield; }

.ps-preview-box {
  background: linear-gradient(180deg, #f3faf6 0%, #f7fcf9 100%);
  border: 1px solid #d3ede0;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.ps-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #e2f0e9;
}

.ps-preview-row:last-child {
  border-bottom: none;
}

.ps-preview-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--primary);
  background: #e3f4ec;
  padding: 3px 10px;
  border-radius: 8px;
  text-align: center;
  min-width: 52px;
}

.ps-preview-time {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.desktop-only-flex { display: flex; }
.mobile-only-flex { display: none; }
.desktop-only { display: block; }
.mobile-only { display: none; }

/* ========================================== */
/* ===  SCORE WORKSPACE TABS / QUICK ENTRY  === */
/* ========================================== */
.score-worktabs {
  width: min(700px, 100%);
  display: flex;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-light);
}

.score-report { max-width: 1100px; margin: auto; padding: 20px; }
.score-report h3 { margin: 0 0 8px; }
.score-report header p, .score-report-note, .score-report-detail { color: var(--text-muted); font-size: 0.85rem; }
.score-report-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.score-report-eyebrow { color: var(--primary); font-size: .75rem; font-weight: 700; display: block; margin-bottom: 8px; }
.score-report-badge { color: var(--primary); background: var(--primary-light); border-radius: 20px; padding: 8px 14px; font-size: .75rem; font-weight: 700; }
.score-report-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.score-report-summary > span { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--border-color); border-radius: 16px; font-size: .78rem; color: var(--text-muted); background: linear-gradient(145deg, var(--bg-card), var(--bg-light)); box-shadow: 0 7px 18px rgba(24,75,60,.08), inset 0 1px 0 rgba(255,255,255,.7); }
.score-report-summary > span::after { content: ''; position: absolute; width: 64px; height: 64px; right: -26px; top: -28px; border-radius: 50%; background: var(--primary-light); opacity: .7; }
.score-report-summary b { display: block; color: var(--text-main); font-size: 1.8rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.score-report-summary small { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
.score-report-section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.score-report-section-head h4 { margin: 0; font-size: 1rem; }
.score-report-section-head > span { font-size: .75rem; color: var(--text-muted); }
.score-report-bar-section,.score-report-pie-section { border: 1px solid var(--border-color); border-radius: 18px; padding: 24px; background: linear-gradient(145deg, var(--bg-card), var(--bg-light)); box-shadow: 0 12px 28px rgba(24,75,60,.07), inset 0 1px 0 rgba(255,255,255,.7); }
.score-report-note { margin: 16px 0 24px; line-height: 1.7; }
.score-report-vertical { display: flex; gap: 8px; }
.score-report-axis { display: flex; flex-direction: column; justify-content: space-between; height: 240px; margin-top: 32px; width: 38px; flex-shrink: 0; color: var(--text-muted); font-size: 0.7rem; }
.score-report-scroll { overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 12px; }
.score-report-chart { list-style: none; padding: 32px 0 0; margin: 0; display: flex; gap: 0; min-width: 100%; width: max-content; }
.score-report-row { width: 140px; flex: 1 0 140px; display: flex; flex-direction: column; text-align: center; }
.score-report-label, .score-report-detail { display: flex; justify-content: space-between; gap: 12px; }
.score-report-label { margin: 14px 8px 0; flex-direction: column; gap: 4px; order: 1; font-size: .82rem; }
.score-report-label strong { overflow-wrap: anywhere; min-width: 0; }
.score-report-label > span { flex-shrink: 0; font-weight: 700; color: var(--primary); }
.score-report-track { height: 240px; flex-shrink: 0; padding: 0; border: 0; border-radius: 0; font: inherit; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; background: repeating-linear-gradient(to top, var(--border-color) 0, var(--border-color) 1px, transparent 1px, transparent 25%); }
.score-report-bar { display: block; position: relative; width: 52px; background: linear-gradient(105deg, color-mix(in srgb, var(--primary) 72%, white), var(--primary) 48%, color-mix(in srgb, var(--primary) 72%, black)); opacity: .65; border-radius: 8px 8px 2px 2px; box-shadow: 8px 0 0 color-mix(in srgb, var(--primary) 76%, black), 0 8px 14px rgba(19,105,82,.22), inset 3px 0 4px rgba(255,255,255,.28); transition: opacity .16s ease, filter .16s ease, transform .16s ease; }
.score-report-bar::after { content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.42); }
.score-report-track:hover .score-report-bar,.score-report-track[aria-pressed=true] .score-report-bar { filter: saturate(1.15) brightness(1.04); transform: translateY(-3px); }
.score-report-bar.is-empty { background: repeating-linear-gradient(135deg, var(--border-color) 0, var(--border-color) 5px, transparent 5px, transparent 10px); box-shadow: none; opacity: .65; }
.score-report-track[aria-pressed=true] .score-report-bar,.score-report-track:hover .score-report-bar { opacity: 1; }
.score-report-track:focus-visible,.score-report-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.score-report-value { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; color: var(--text-main); font-size: .83rem; }
.score-report-detail { margin-top: 6px; flex-direction: column; gap: 4px; font-size: 0.78rem; order: 2; }
.score-report-pie-section { margin-top: 20px; }
.score-report-pie-section select { max-width: 420px; margin-top: 8px; }
.score-report-pie-layout { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 12px 0; }
.score-report-pie { position: relative; width: 260px; height: 260px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.score-report-pie-center { position: absolute; left: 50%; top: 43%; width: 116px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--bg-card), var(--bg-light)); display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(24,75,60,.14), inset 3px 4px 8px rgba(255,255,255,.65), inset -4px -5px 9px rgba(0,0,0,.08); }
.score-report-pie-center strong { font-size: 2rem; line-height: 1.4; color: var(--text-main); }
.score-report-pie-center small,.score-report-pie-center > span { font-size: .8rem; color: var(--text-muted); font-weight: 400; }
.score-report-legend { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; min-width: 245px; max-width: 440px; }
.score-report-legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 0.82rem; padding: 13px 0; border-bottom: 1px solid var(--border-color); }
.score-report-legend li:last-child { border-bottom: 0; }
.score-report-legend strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-report-legend small { display: inline-block; min-width: 48px; text-align: right; color: var(--text-muted); font-weight: 400; }
.score-report-dot { width: 12px; height: 12px; border-radius: 50%; }
.score-report-empty { text-align: center; padding: 40px 12px; color: var(--text-muted); }
.score-report-student-section { border: 1px solid var(--border-color); border-radius: 18px; padding: 24px; margin-bottom: 20px; background: linear-gradient(145deg, var(--bg-card), var(--bg-light)); box-shadow: 0 12px 28px rgba(24,75,60,.07), inset 0 1px 0 rgba(255,255,255,.7); }
.score-report-student-chart { display: flex; align-items: flex-end; gap: 18px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 18px 14px 8px; }
.score-report-student-row { width: 94px; flex: 0 0 94px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 5px; border-radius: 12px; }
.score-report-student-row:hover { background: var(--primary-light); }
.score-report-student-row.is-highest { box-shadow: inset 0 -3px var(--color-present); }
.score-report-student-row.is-lowest { box-shadow: inset 0 -3px var(--color-absent); }
.score-report-student-label { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; font-size: .78rem; order: 0; }
.score-report-student-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-report-student-label strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.score-report-student-track { position: relative; width: 64px; height: 220px; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid var(--border-color); border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(to top, var(--border-color) 0, var(--border-color) 1px, transparent 1px, transparent 25%), var(--bg-light); box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }
.score-report-student-track.is-incomplete { background: repeating-linear-gradient(135deg, transparent 0, transparent 5px, color-mix(in srgb, var(--text-muted) 13%, transparent) 5px, color-mix(in srgb, var(--text-muted) 13%, transparent) 8px), repeating-linear-gradient(to top, var(--border-color) 0, var(--border-color) 1px, transparent 1px, transparent 25%), var(--bg-light); }
.score-report-student-bar { display: block; width: 100%; background: var(--primary); }
.score-report-student-meta { color: var(--text-muted); font-size: .68rem; white-space: nowrap; order: 2; text-align: center; }
.score-report-student-row[role=button] { cursor: pointer; }
.score-report-student-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.score-report-student-row.is-selected { background: var(--primary-light); }
.score-report-student-detail { margin-top: 20px; padding: 16px; border-top: 1px solid var(--border-color); background: var(--bg-light); border-radius: 12px; }
.score-report-student-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.score-report-student-detail-head div { display: flex; flex-direction: column; gap: 2px; }
.score-report-student-detail-head strong { font-size: .95rem; color: var(--text-main); }
.score-report-student-detail-head span { font-size: .75rem; color: var(--text-muted); }
.score-report-student-detail-head > b { color: var(--primary); font-size: 1.3rem; }
.score-report-student-detail ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 24px; list-style: none; padding: 0; margin: 0; }
.score-report-student-detail li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-color); font-size: .78rem; }
.score-report-student-detail li strong { white-space: nowrap; }
.score-report-matrix { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 18px; }
.score-report-matrix summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.score-report-matrix summary::-webkit-details-marker { display: none; }
.score-report-matrix summary > span { display: flex; flex-direction: column; gap: 3px; }
.score-report-matrix summary strong { color: var(--text-main); font-size: .95rem; }
.score-report-matrix summary small, .score-report-matrix summary b { color: var(--text-muted); font-size: .75rem; font-weight: 500; }
.score-report-matrix-scroll { margin-top: 14px; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 10px; }
.score-report-matrix table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .76rem; }
.score-report-matrix th, .score-report-matrix td { padding: 9px 10px; border-bottom: 1px solid var(--border-color); text-align: center; white-space: nowrap; }
.score-report-matrix thead th { background: var(--bg-light); color: var(--text-muted); font-weight: 600; vertical-align: bottom; }
.score-report-matrix thead th span, .score-report-matrix tbody th span { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 145px; }
.score-report-matrix thead th small, .score-report-matrix tbody th small, .score-report-matrix td small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .68rem; font-weight: 400; }
.score-report-matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg-card); text-align: left; font-weight: 600; }
.score-report-matrix-cell { min-width: 74px; font-variant-numeric: tabular-nums; }
.score-report-matrix-cell.is-high { background: color-mix(in srgb, var(--color-present) 13%, transparent); }
.score-report-matrix-cell.is-mid { background: color-mix(in srgb, var(--primary) 11%, transparent); }
.score-report-matrix-cell.is-low { background: color-mix(in srgb, var(--color-absent) 12%, transparent); }
.score-report-matrix-cell.is-missing { background: repeating-linear-gradient(135deg, transparent 0, transparent 5px, color-mix(in srgb, var(--text-muted) 14%, transparent) 5px, color-mix(in srgb, var(--text-muted) 14%, transparent) 8px); color: var(--text-muted); }
.score-report-matrix-total { background: var(--bg-light); }
.score-report-matrix-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: var(--text-muted); font-size: .72rem; }
.score-report-matrix-legend span { display: inline-flex; align-items: center; gap: 5px; }
.score-report-matrix-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.score-report-matrix-legend i.is-high { background: color-mix(in srgb, var(--color-present) 55%, var(--bg-card)); }
.score-report-matrix-legend i.is-mid { background: color-mix(in srgb, var(--primary) 55%, var(--bg-card)); }
.score-report-matrix-legend i.is-low { background: color-mix(in srgb, var(--color-absent) 55%, var(--bg-card)); }
.score-report-matrix-legend i.is-missing { background: repeating-linear-gradient(135deg, var(--bg-card) 0, var(--bg-card) 4px, var(--border-color) 4px, var(--border-color) 7px); }
.score-report-tabs { display: flex; gap: 8px; margin: 14px 0 20px; padding: 4px; border-radius: 12px; background: var(--bg-light); }
.score-report-tab { flex: 1; border: 0; border-radius: 9px; padding: 9px 12px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .82rem; }
.score-report-tab[aria-selected="true"] { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 4px 10px rgba(15,159,130,.18); }
.score-report-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.score-report-submission-section { margin: 20px 0; padding: 22px 24px; border: 1px solid var(--border-color); border-radius: 18px; background: linear-gradient(145deg, var(--bg-card), var(--bg-light)); }
.score-report-submission-legend { display: flex; gap: 16px; margin: 4px 0 18px; color: var(--text-muted); font-size: .75rem; }
.score-report-submission-legend span { display: inline-flex; align-items: center; gap: 5px; }
.score-report-submission-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.score-report-submission-legend i.is-submitted { background: var(--color-present); }
.score-report-submission-legend i.is-missing { background: var(--color-absent); }
.score-report-submission-list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.score-report-submission-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr minmax(145px, .8fr); align-items: center; gap: 14px; }
.score-report-submission-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.score-report-submission-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.score-report-submission-label span, .score-report-submission-detail { color: var(--text-muted); font-size: .7rem; }
.score-report-submission-track { display: flex; height: 22px; overflow: hidden; border-radius: 6px; background: var(--bg-light); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.score-report-submission-track span { display: block; min-width: 2px; }
.score-report-submission-track .is-submitted { background: var(--color-present); }
.score-report-submission-track .is-missing { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-absent) 58%, var(--bg-card)) 0, color-mix(in srgb, var(--color-absent) 58%, var(--bg-card)) 5px, color-mix(in srgb, var(--color-absent) 28%, var(--bg-card)) 5px, color-mix(in srgb, var(--color-absent) 28%, var(--bg-card)) 9px); }
.score-report-submission-detail { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
@media (max-width: 600px) {
  .score-report { padding: 8px 2px; }
  .score-report-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .score-report-summary > span { padding: 12px 8px; font-size: .7rem; }
  .score-report-summary b { font-size: 1.4rem; }
  .score-report-summary small { font-size: .65rem; }
  .score-report-bar-section,.score-report-pie-section { padding: 18px 12px; }
  .score-report-pie-layout { gap: 24px; }
  .score-report-legend { min-width: 0; flex-basis: 100%; }
  .score-report-student-section { padding: 18px 12px; }
  .score-report-student-chart { gap: 12px; padding-inline: 5px; }
  .score-report-student-row { width: 78px; flex-basis: 78px; padding-inline: 2px; }
  .score-report-student-track { width: 52px; height: 180px; }
  .score-report-student-meta { font-size: .62rem; }
  .score-report-student-detail ul { grid-template-columns: 1fr; }
  .score-report-tabs { gap: 4px; }
  .score-report-tab { padding-inline: 6px; font-size: .72rem; }
  .score-report-submission-section { padding: 18px 12px; }
  .score-report-submission-row { grid-template-columns: 1fr; gap: 6px; }
  .score-report-submission-track { height: 18px; }
  .score-report-matrix summary { align-items: flex-start; flex-direction: column; gap: 6px; }
  .score-report-matrix-scroll { margin-inline: -4px; }
  .score-worktab { gap: 4px; padding: 6px 4px; }
  .score-worktab i { display: none; }
}

.score-worktab {
  flex: 1;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-normal);
}

.score-worktab:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.score-worktab.active {
  color: var(--primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.score-worktab.is-locked {
  cursor: not-allowed;
  color: var(--text-muted);
  opacity: 0.58;
}

.score-worktab.is-locked:hover {
  color: var(--text-muted);
  background: transparent;
}

.score-worktab-lock {
  font-size: 0.82rem;
}

.score-quick-shell,
.score-items-shell {
  display: grid;
  gap: 14px;
}

.score-quick-head,
.score-items-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
}

.score-mode-label {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 850;
}

.score-quick-head h3,
.score-items-head h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 850;
}

.score-quick-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.score-quick-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.score-quick-controls select {
  min-width: 220px;
}

.score-quick-summary {
  display: grid;
  grid-template-columns: 110px 90px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--primary-light-border);
  border-radius: 14px;
  background: var(--primary-light);
}

.score-quick-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.score-quick-summary strong {
  color: var(--primary);
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.score-quick-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(29, 158, 117, 0.14);
}

.score-quick-progress div {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.2s ease;
}

.score-quick-list {
  display: grid;
  gap: 8px;
}

.score-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--bg-card);
}

.score-quick-row:focus-within {
  border-color: var(--primary-light-border);
  background: var(--primary-light);
}

.score-quick-student {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.score-quick-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 850;
}

.score-quick-student strong {
  display: block;
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-quick-student span {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.score-quick-input {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.score-quick-input:focus-within {
  background: #fff;
  box-shadow: 0 0 0 3px var(--primary-light-border);
}

.score-quick-input input {
  width: 54px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 850;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.score-quick-input input::-webkit-outer-spin-button,
.score-quick-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-quick-input input { -moz-appearance: textfield; appearance: textfield; }

.score-empty-panel {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 32px 20px;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  text-align: center;
}

.score-empty-panel i {
  color: var(--primary);
  font-size: 2.4rem;
}

.score-empty-panel strong {
  color: var(--text-main);
  font-size: 1rem;
}

.score-empty-panel span {
  max-width: 420px;
  font-size: 0.84rem;
  line-height: 1.6;
}

.score-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.score-item-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.score-item-card span {
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 850;
}

.score-item-card strong {
  display: block;
  margin-top: 3px;
  color: var(--text-main);
  font-size: 0.95rem;
}

.score-item-card p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.score-item-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-light);
}

.score-item-meter div {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.score-item-card footer {
  display: flex;
  align-items: center;
  gap: 7px;
}

.score-item-card footer span {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.score-item-card footer button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

/* ========================================== */
/* ===  CURRICULUM DATABASE BROWSER  ======== */
/* ========================================== */
.curriculum-browser {
  display: grid;
  gap: 14px;
}

.main-curriculum-browser {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.curriculum-browser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 4px 4px;
}

.curriculum-browser-head h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.12rem;
  font-weight: 850;
}

.curriculum-browser-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.curriculum-database-stat {
  min-width: 126px;
  padding: 9px 12px;
  border-left: 3px solid var(--primary);
  background: var(--primary-light);
}

.curriculum-database-stat strong,
.curriculum-database-stat span {
  display: block;
}

.curriculum-database-stat strong {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.curriculum-database-stat span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.curriculum-subject-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scrollbar-width: thin;
}

.curriculum-subject-btn {
  min-width: 105px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-normal);
}

.curriculum-subject-btn:hover {
  border-color: var(--primary-light-border);
  background: var(--primary-light);
}

.curriculum-subject-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}

.curriculum-subject-code {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.curriculum-subject-btn.active .curriculum-subject-code {
  background: var(--primary);
  color: var(--bg-card);
}

.curriculum-subject-copy {
  min-width: 0;
}

.curriculum-subject-copy strong,
.curriculum-subject-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.curriculum-subject-copy strong {
  font-size: 0.75rem;
  font-weight: 800;
}

.curriculum-subject-copy small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 650;
}

.curriculum-filter-bar {
  display: grid;
  grid-template-columns: 110px minmax(180px, 1.2fr) minmax(180px, 1fr) minmax(190px, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-light);
}

.curriculum-filter-bar label > span {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.curriculum-filter-bar select,
.curriculum-search > div {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.curriculum-filter-bar select {
  padding: 0 10px;
  cursor: pointer;
}

.curriculum-filter-bar select:focus,
.curriculum-search > div:focus-within {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.curriculum-search > div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.curriculum-search i {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.curriculum-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.curriculum-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 2px;
}

.curriculum-results-head strong,
.curriculum-results-head span {
  display: block;
}

.curriculum-results-head strong {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 850;
}

.curriculum-results-head span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.curriculum-results-head a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.curriculum-indicator-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.curriculum-indicator-row {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  transition: var(--transition-normal);
}

.curriculum-indicator-row:hover {
  border-color: var(--primary-light-border);
  background: var(--primary-light);
}

.curriculum-indicator-code strong,
.curriculum-indicator-code span {
  display: block;
}

.curriculum-indicator-code strong {
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 900;
}

.curriculum-indicator-code span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.curriculum-indicator-text p {
  margin: 0;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.55;
}

.curriculum-indicator-text span {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.curriculum-readonly-badge {
  padding: 5px 8px;
  border-radius: 20px;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.curriculum-unavailable,
.curriculum-no-results {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  color: var(--text-muted);
  text-align: left;
}

.curriculum-unavailable-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 1.3rem;
}

.curriculum-unavailable h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
}

.curriculum-unavailable p {
  max-width: 620px;
  margin: 5px 0 7px;
  font-size: 0.8rem;
  line-height: 1.55;
}

.curriculum-unavailable div > span {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 750;
}

.curriculum-no-results {
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

.curriculum-no-results i {
  color: var(--primary);
  font-size: 1.6rem;
}

.curriculum-no-results strong {
  color: var(--text-main);
}

.curriculum-no-results span {
  font-size: 0.76rem;
}

@media (max-width: 720px) {
  .score-worktabs { width: 100%; }
  .score-worktab { min-width: 0; flex: 1 1 0; font-size: 0.76rem; }
  .score-quick-head,
  .score-items-head {
    flex-direction: column;
  }
  .score-quick-controls {
    width: 100%;
    justify-content: stretch;
  }
  .score-quick-controls select,
  .score-quick-controls button {
    width: 100%;
  }
  .score-quick-summary {
    grid-template-columns: 1fr 1fr;
  }
  .score-quick-progress {
    grid-column: 1 / -1;
  }
  .score-quick-row {
    align-items: stretch;
    flex-direction: column;
  }
  .score-quick-input {
    justify-content: center;
  }
  .curriculum-browser-head {
    align-items: stretch;
    flex-direction: column;
  }
  .curriculum-database-stat {
    min-width: 0;
  }
  .curriculum-subject-rail {
    grid-template-columns: repeat(8, 118px);
  }
  .curriculum-filter-bar {
    grid-template-columns: 1fr;
  }
  .curriculum-indicator-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .curriculum-readonly-badge {
    display: none;
  }
  .curriculum-unavailable {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ช่องคะแนนย่อยใน modal สรุปนักเรียน (เก็บ/กลางภาค/ปลายภาค) */
.ss-sbox { background: var(--bg-light); border-radius: 12px; padding: 12px 6px; text-align: center; }
.ss-sbox b { font-size: 1.3rem; font-weight: 800; color: var(--text-main); }
.ss-sbox .ss-max { font-size: 0.72rem; color: var(--text-muted); margin-left: 1px; }
.ss-sbox .ss-lbl { display: block; font-size: 0.66rem; font-weight: 700; color: var(--text-muted); margin-top: 3px; }

/* Mobile timetable (Option B: all days vertical) */
.m-tt-page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.m-tt-head-actions { display: flex; align-items: center; gap: 8px; }
.m-tt-settings-btn,
.m-tt-add-btn,
.m-tt-day-add {
  min-height: 42px; border: 1px solid var(--border-color); border-radius: 12px; font: inherit; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}

.curriculum-pick-btn { border: 0; cursor: pointer; font: inherit; white-space: nowrap; }
.indicator-add-btn { white-space: nowrap; }
.indicator-selected-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; color: var(--text-muted); font-size: .8rem; }
.indicator-selected-head strong { color: var(--text-main); }
.score-indicator-list { display: grid; gap: 10px; }
.indicator-list-empty { min-height: 330px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 28px; border: 1px dashed var(--border-color); border-radius: 18px; color: var(--text-muted); text-align: center; }
.indicator-list-empty > i { font-size: 2rem; color: var(--primary); }
.indicator-list-empty strong { color: var(--text-main); }
.indicator-list-empty .btn { margin-top: 8px; }
.indicator-list-item { border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease; }
.indicator-list-item[open] { border-color: color-mix(in srgb, var(--primary) 32%, var(--border-color)); box-shadow: 0 5px 16px rgba(15,23,42,.06); }
.indicator-list-item > summary { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.indicator-list-item > summary::-webkit-details-marker { display: none; }
.indicator-list-chevron { color: var(--text-muted); transition: transform .16s ease; }
.indicator-list-item[open] .indicator-list-chevron { transform: rotate(90deg); color: var(--primary); }
.indicator-list-copy { min-width: 0; display: grid; gap: 3px; }
.indicator-list-copy strong { color: var(--primary); font-size: .82rem; }
.indicator-list-copy > span { overflow: hidden; color: var(--text-main); font-size: .84rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.indicator-list-stats { display: flex; gap: 7px; }
.indicator-list-stats b { padding: 5px 8px; border-radius: 999px; background: var(--bg-light); color: var(--text-muted); font-size: .7rem; white-space: nowrap; }
.indicator-list-stats b:last-child { background: var(--primary-light); color: var(--primary-deep); }
.indicator-list-detail { padding: 0 16px 14px 50px; border-top: 1px solid var(--border-color); }
.indicator-list-detail > p { margin: 12px 0; color: var(--text-muted); font-size: .78rem; line-height: 1.55; }
.indicator-linked-title { display: flex; justify-content: space-between; gap: 8px; margin: 13px 0 7px; }
.indicator-linked-title span { font-size: .8rem; font-weight: 800; }
.indicator-linked-title small { color: var(--text-muted); font-size: .7rem; }
.indicator-linked-items { border: 1px solid var(--border-color); border-radius: 11px; overflow: hidden; }
.indicator-linked-items label { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 11px; border-top: 1px solid var(--border-color); font-size: .78rem; cursor: pointer; }
.indicator-linked-items label:first-child { border-top: 0; }
.indicator-linked-items label:hover { background: var(--primary-light); }
.indicator-linked-items label span { flex: 1; }
.indicator-linked-items label small { color: var(--text-muted); }
.indicator-no-items { padding: 14px; color: var(--text-muted); font-size: .76rem; text-align: center; }
.indicator-remove-btn { margin-top: 11px; padding: 5px 0; border: 0; background: transparent; color: var(--color-absent); font: inherit; font-size: .72rem; cursor: pointer; }
.indicator-search-overlay { position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center; padding: 18px; background: rgba(15,23,42,.42); backdrop-filter: blur(3px); }
.indicator-search-panel { width: min(1120px, 100%); max-height: min(860px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: auto; padding: 18px; border-radius: 20px; background: var(--bg-card); box-shadow: var(--shadow-lg); }
.indicator-search-panel > header,
.indicator-search-panel > .curriculum-subject-rail,
.indicator-search-panel > .curriculum-filter-bar { flex-shrink: 0; }
.indicator-search-panel > .curriculum-filter-bar { margin-top: 12px; }
.indicator-search-panel > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.indicator-search-panel > header span { color: var(--primary); font-size: .7rem; font-weight: 800; }
.indicator-search-panel > header h3 { margin-top: 2px; font-size: 1.08rem; }
.indicator-search-panel > header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg-light); color: var(--text-muted); cursor: pointer; }
.indicator-search-main { display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 12px; }
.indicator-search-main:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.indicator-search-main i { color: var(--text-muted); }
.indicator-search-main input { width: 100%; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--text-main); font: inherit; }
.indicator-search-filters { margin-top: 10px; }
.indicator-search-filters > summary { color: var(--text-muted); font-size: .74rem; cursor: pointer; }
.indicator-search-filters .curriculum-filter-bar { margin: 10px 0 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
.indicator-search-results { min-height: 0; margin-top: 12px; overflow: auto; }
.indicator-search-results .curriculum-indicator-list { grid-template-columns: 1fr; }
.indicator-search-results .curriculum-indicator-row { grid-template-columns: 120px minmax(0,1fr) auto; }
.score-indicator-list.indicator-mini-canvas { position: relative; display: block; min-height: 620px; overflow: auto; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-card); }
.indicator-canvas-lanes { position: absolute; inset: 0 auto 0 0; z-index: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: max(100%,760px); min-height: 100%; pointer-events: none; }
.indicator-canvas-lanes > span { display: block; padding-top: 20px; color: var(--text-main); font-size: .82rem; font-weight: 700; text-align: center; background: linear-gradient(to bottom,var(--bg-light) 56px,transparent 56px); }
.indicator-canvas-lanes > span:first-child { border-right: 1px solid var(--border-color); }
.indicator-canvas-lanes > span:last-child { background-color: color-mix(in srgb,var(--bg-light) 35%,var(--bg-card)); }
.indicator-map-group { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 0; width: 204px; }
.indicator-mini-block { position: relative; width: 100%; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); box-shadow: 0 2px 6px rgba(15,23,42,.04); overflow: hidden; }
.indicator-code-button { flex: 1; min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: var(--primary-deep); font: inherit; font-size: .76rem; font-weight: 700; text-align: left; cursor: pointer; }
.indicator-code-button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px; }
.indicator-mini-drag { display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 6px 8px; background: var(--primary-light); cursor: grab; user-select: none; touch-action: none; }
.indicator-mini-drag:active { cursor: grabbing; }
.indicator-mini-drag i { color: var(--text-muted); font-size: .8rem; }
.indicator-mini-drag strong { flex: 1; color: var(--primary-deep); font-size: .72rem; }
.indicator-mini-drag span { color: var(--text-muted); font-size: .58rem; }
.indicator-mini-content { display: block; width: 100%; padding: 9px 10px; color: inherit; text-align: left; }
.indicator-mini-content > span { display: -webkit-box; min-height: 50px; overflow: hidden; color: var(--text-main); font-size: .7rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.indicator-live-score { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 7px 8px; border-radius: 9px; background: var(--primary-light); }
.indicator-live-score small { color: var(--primary-deep); font-size: .56rem; }
.indicator-live-score strong { color: var(--primary-deep); font-size: .92rem; }
.indicator-mini-content footer { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.indicator-mini-content b { padding: 3px 6px; border-radius: 999px; background: var(--bg-light); color: var(--text-muted); font-size: .6rem; }
.indicator-mini-content footer button { margin-left: auto; padding: 3px 5px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: .58rem; cursor: pointer; }
.indicator-job-branches { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 12px 0 0 38px; }
.indicator-job-branches::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 14px; width: 1px; background: color-mix(in srgb,var(--primary) 25%,var(--border-color)); }
.indicator-job-node::before { content: ''; position: absolute; right: 100%; top: 50%; width: 22px; height: 1px; background: color-mix(in srgb,var(--primary) 25%,var(--border-color)); }
.indicator-job-node { position: relative; z-index: 1; }
.indicator-job-node { display: block; width: 100%; min-width: 0; min-height: 32px; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-card); color: var(--text-main); font-size: .7rem; font-weight: 500; line-height: 1.5; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.indicator-branch-empty { position: relative; margin-top: 24px; width: 150px; min-height: 38px; padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); box-shadow: 0 3px 10px rgba(15,23,42,.05); color: var(--primary); font: inherit; font-size: .66rem; font-weight: 800; cursor: pointer; }
.indicator-branch-empty::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 24px; background: color-mix(in srgb,var(--primary) 38%,var(--border-color)); transform: translateX(-50%); }
.indicator-editor-overlay { position: fixed; inset: 0; z-index: 9210; display: grid; place-items: center; padding: 18px; background: rgba(15,23,42,.42); backdrop-filter: blur(3px); }
.indicator-editor-panel { width: min(520px,100%); max-height: min(720px,calc(100vh - 36px)); display: flex; flex-direction: column; padding: 18px; border-radius: 20px; background: var(--bg-card); box-shadow: var(--shadow-lg); }
.indicator-editor-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.indicator-editor-panel > header strong { color: var(--primary); font-size: .76rem; }
.indicator-editor-panel > header h3 { margin-top: 2px; font-size: 1.05rem; }
.indicator-editor-panel > header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg-light); color: var(--text-muted); cursor: pointer; }
.indicator-editor-panel > p { margin: 12px 0; color: var(--text-muted); font-size: .78rem; line-height: 1.55; }
.indicator-max-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-main); font-size: .78rem; font-weight: 750; }
.indicator-max-field input { width: 86px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-main); font: inherit; font-weight: 800; text-align: right; }
.indicator-max-field input:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.indicator-editor-total { display: flex; justify-content: space-between; margin-bottom: 9px; padding: 9px 11px; border-radius: 10px; background: var(--primary-light); color: var(--primary-deep); font-size: .78rem; }
.indicator-editor-panel .indicator-linked-items { min-height: 0; overflow: auto; }
.indicator-editor-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.m-tt-settings-btn { width: 42px; padding: 0; background: var(--bg-card); color: var(--text-muted); }
.m-tt-add-btn { padding: 0 14px; background: var(--primary); border-color: var(--primary); color: #fff; }
.m-tt-settings-btn:active,
.m-tt-add-btn:active,
.m-tt-day-add:active,
.m-tt-row:active,
.m-tt-no-class:active { transform: scale(0.98); }
.m-tt-manage-hint {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 9px 11px;
  border: 1px solid #dbe8e2; border-radius: 11px; background: #f4faf7; color: var(--text-muted);
  font-size: 0.74rem; line-height: 1.45;
}
.m-tt-manage-hint i { color: var(--primary); font-size: 1rem; margin-top: 1px; }
.m-tt-day { border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; border: 1px solid transparent; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.m-tt-day.is-today { border-color: transparent; background: #f7fcfa; }
.m-tt-day-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; }
.m-tt-day-title { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.m-tt-day-name { font-size: 0.88rem; font-weight: 700; color: var(--text-main); }
.m-tt-day.is-today .m-tt-day-name { color: var(--primary); }
.m-tt-today-badge { color: #fff; padding: 1px 7px; border-radius: 20px; margin-left: 4px; font-size: 0.66rem; font-weight: 700; }
.m-tt-day-count { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.m-tt-day.is-today .m-tt-day-count { color: var(--primary); }
.m-tt-day-add { min-height: 38px; flex: 0 0 auto; padding: 0 10px; font-size: 0.74rem; }
.m-tt-slots { display: flex; flex-direction: column; gap: 0; }
.m-tt-row {
  width: 100%; display: flex; gap: 10px; align-items: stretch; padding: 9px 12px; border: 0;
  border-top: 1px solid var(--border-color); background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; transition: background 0.15s ease, transform 0.12s ease;
}
.m-tt-row:hover { background: rgba(34, 160, 90, 0.05); }
.m-tt-time { width: 58px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.m-tt-time span { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }
.m-tt-body { flex: 1; display: flex; align-items: center; min-height: 38px; }
.m-tt-class { background: var(--primary-light); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; padding: 6px 10px; width: 100%; }
.m-tt-class .s { font-size: 0.82rem; font-weight: 600; color: var(--primary); }
.m-tt-class .r { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
.m-tt-row-arrow { align-self: center; flex: 0 0 auto; color: #aab4bd; font-size: 1rem; }
.m-tt-empty { width: 100%; height: 28px; background: transparent; border-radius: 6px; }
.m-tt-no-class {
  width: calc(100% - 24px); min-height: 46px; margin: 0 12px 12px; padding: 8px 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--border-color);
  border-radius: 10px; background: var(--bg-light); color: var(--text-muted); font: inherit; font-size: 0.76rem;
  cursor: pointer;
}

.period-editor-actions { display: flex; gap: 10px; margin-top: 24px; }
.period-editor-actions .btn:first-child { flex: 1; }
.period-editor-actions .btn-danger { flex: 1; }
.period-editor-actions .btn-primary { flex: 2; }
.period-mobile-fields .form-group { margin-bottom: 14px; }
.period-mobile-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
.period-mobile-class-select { min-height: 52px; font-size: 1rem; font-weight: 600; }
.period-mobile-help { margin-top: 5px; color: var(--text-muted); font-size: 0.72rem; }

@media (max-width: 768px) {
  .curriculum-browser-head { align-items: flex-start; }
  .indicator-list-item > summary { grid-template-columns: 20px minmax(0,1fr); padding: 12px; }
  .indicator-list-stats { grid-column: 2; }
  .indicator-list-detail { padding: 0 12px 12px 42px; }
  .indicator-search-overlay { align-items: end; padding: 0; }
  .indicator-search-panel { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .indicator-search-panel .indicator-search-results { flex-shrink: 0; overflow: visible; }
  .indicator-search-filters .curriculum-filter-bar { grid-template-columns: 1fr; }
  .indicator-search-results .curriculum-indicator-row { grid-template-columns: 1fr auto; }
  .indicator-search-results .curriculum-indicator-code { grid-column: 1 / -1; }
  .score-indicator-list.indicator-mini-canvas { min-height: 720px; }
  .indicator-canvas-lanes { width: max(100%,760px); }
  .indicator-canvas-lanes > span { padding-top: 20px; font-size: .76rem; }
  .indicator-map-group { gap: 0; width: 204px; }
  .indicator-mini-block { width: min(204px,100%); }
  .indicator-job-branches { gap: 8px; width: 100%; padding-top: 12px; }
  .indicator-job-branches::before { left: 16px; top: 0; bottom: 14px; width: 1px; }
  .indicator-job-node { padding: 7px 10px; font-size: .7rem; }
  .indicator-branch-empty { width: 140px; margin-top: 20px; }
  .indicator-branch-empty::before { left: 50%; bottom: 100%; top: auto; width: 2px; height: 20px; transform: translateX(-50%); }
  .indicator-editor-overlay { align-items: end; padding: 0; }
  .indicator-editor-panel { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; padding-bottom: max(18px,env(safe-area-inset-bottom)); }
  .period-editor-sheet { width: 100%; max-width: 100%; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .period-editor-actions { position: sticky; bottom: 0; z-index: 2; margin: 18px -20px -18px; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--border-color); }
  .period-editor-actions .btn { min-height: 46px; }
}


/* ========================================== */
/* === มือถือ: การ์ดคะแนน (โหมดลงมือ) === */
/* ========================================== */
/* กันตารางกว้างเดิม — โหมดนี้ไม่ต้อง scroll แนวนอน */
.msc-wrap { overflow-x: visible; }

/* --- กริดรายชื่อ --- */
.msc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.msc-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 14px 8px; cursor: pointer; transition: var(--transition-normal);
}
.msc-card:active { transform: scale(0.97); }
.msc-card:hover { border-color: var(--primary-light-border); box-shadow: var(--shadow-sm); }
.msc-av {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; font-weight: 700; line-height: 1.12;
  text-align: center; overflow: hidden; overflow-wrap: anywhere; padding: 4px;
  box-sizing: border-box;
}
.msc-av.is-small { font-size: 0.78rem; }
.msc-av.is-tiny { font-size: 0.66rem; }
.msc-no { font-size: 0.72rem; color: var(--text-muted); }
.msc-name { font-size: 0.84rem; color: var(--text-main); line-height: 1.3; }

/* --- หน้ากรอกรายคน --- */
.msc-back {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none;
  color: var(--primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 2px 0; margin-bottom: 12px;
}
.msc-back i { font-size: 1.05rem; }
.msc-shead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.msc-av-sm { width: 46px; height: 46px; font-size: 0.95rem; }
.msc-sname { font-size: 1rem; font-weight: 700; color: var(--text-main); }
.msc-sno { font-size: 0.76rem; color: var(--text-muted); }

/* การ์ดสรุป คะแนนรวม + เกรด (เขียวเข้ม) */
.msc-summary {
  display: flex; align-items: center; gap: 16px; background: var(--primary);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 18px;
}
.msc-sum-left { flex: 1; min-width: 0; }
.msc-sum-lbl { font-size: 0.72rem; color: rgba(255, 255, 255, 0.82); margin-bottom: 3px; }
.msc-sum-total { display: flex; align-items: baseline; gap: 5px; color: #fff; }
.msc-sum-total b { font-size: 2rem; font-weight: 700; line-height: 1; }
.msc-sum-total span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }
.msc-bar { height: 6px; background: rgba(255, 255, 255, 0.28); border-radius: 999px; margin-top: 11px; overflow: hidden; }
.msc-bar-fill { height: 100%; background: #fff; border-radius: 999px; transition: width 0.25s; }
.msc-sum-grade { text-align: center; flex-shrink: 0; }
.msc-sum-grade .msc-sum-lbl { text-align: center; }
.msc-grade-badge {
  width: 58px; height: 58px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; font-weight: 700;
}
.msc-g-high { background: #eaf3de; color: #3b6d11; }
.msc-g-mid  { background: #faeeda; color: #854f0b; }
.msc-g-low  { background: #fbeaf0; color: #993556; }
.msc-g-zero { background: #fcebeb; color: #a32d2d; }

/* บล็อกคะแนน (ก่อน/หลังกลางภาค · กลางภาค · ปลายภาค) แยกกรอบและสีให้เห็นประเภทชัดบนมือถือ */
.msc-bucket {
  --msc-accent: #2f9e72; --msc-tint: #f4fbf7; --msc-border: #bfe2d2; --msc-divider: #d8eee3;
  margin-bottom: 14px; padding: 13px 12px 12px;
  border: 1px solid var(--msc-border);
  border-left: 4px solid var(--msc-accent); border-radius: 12px; background: var(--msc-tint);
}
.msc-bucket-before { --msc-accent: #2f9e72; --msc-tint: #f4fbf7; --msc-border: #bfe2d2; --msc-divider: #d8eee3; }
.msc-bucket-after { --msc-accent: #4f86d9; --msc-tint: #f5f8fd; --msc-border: #c6d8f2; --msc-divider: #dce7f7; }
.msc-bucket-mid { --msc-accent: #d39524; --msc-tint: #fffbf1; --msc-border: #ead6a7; --msc-divider: #f2e6c8; }
.msc-bucket-final { --msc-accent: #8b6bc7; --msc-tint: #faf7fd; --msc-border: #d9cbed; --msc-divider: #e8dff4; }
.msc-bhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; padding: 0 2px 9px; border-bottom: 2px solid var(--msc-divider); }
.msc-blabel { font-size: 0.88rem; font-weight: 800; color: var(--text-main); }
.msc-bweight { font-size: 0.74rem; font-weight: 700; color: var(--msc-accent); }
/* แถวรายการ — เส้นบางๆ คั่นแต่ละช่อง */
.msc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 2px; border-bottom: 1px solid var(--msc-divider);
}
.msc-row:last-of-type { border-bottom: none; }
.msc-row-name { flex: 1; font-size: 0.9rem; color: var(--text-main); cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msc-gesture-hint {
  display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 10px 12px;
  border: 1px solid var(--primary-light-border); border-radius: 10px; background: var(--primary-light);
  color: var(--text-muted); font-size: 0.76rem; line-height: 1.45;
}
.msc-gesture-hint i { flex: 0 0 auto; color: var(--primary); font-size: 1rem; margin-top: 1px; }
.msc-gesture-hint b { color: var(--primary-deep); }
.msc-score-control {
  display: inline-flex; align-items: stretch; gap: 7px; position: relative; flex: 0 0 auto;
}
.msc-box {
  display: inline-flex; align-items: center; gap: 3px; background: var(--bg-light);
  position: relative; border: 1px solid transparent; border-radius: 10px; padding: 6px 12px;
  flex-shrink: 0; transition: var(--transition-normal);
}
.msc-box:focus-within { background: var(--primary-light); box-shadow: 0 0 0 2px var(--primary-light-border); }
.msc-slide-handle {
  width: 44px; min-width: 44px; min-height: 48px; padding: 0; border: 1px solid var(--msc-border);
  border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--msc-accent); cursor: ns-resize; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.msc-slide-handle:active { transform: scale(0.97); }
.msc-slide-grip { width: 18px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.msc-slide-grip i { display: block; height: 2px; border-radius: 999px; background: currentColor; opacity: 0.82; }
.msc-score-control.is-slide-active { z-index: 20; }
.msc-score-control.is-slide-active .msc-box { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light-border); }
.msc-score-control.is-slide-active .msc-slide-handle { background: var(--msc-accent); border-color: var(--msc-accent); color: #fff; box-shadow: 0 0 0 3px var(--msc-border); }
.msc-score-control.is-slide-active::before {
  content: "ลากขึ้น +  ·  ลากลง −"; position: absolute; left: 50%; bottom: calc(100% + 44px);
  transform: translateX(-50%); width: max-content; padding: 5px 9px; border-radius: 999px;
  background: #26312d; color: #fff; font-size: 0.68rem; font-weight: 700; pointer-events: none;
}
.msc-score-control.is-slide-active::after {
  content: attr(data-slide-value); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); min-width: 42px; padding: 5px 10px; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 1rem; font-weight: 800; text-align: center; pointer-events: none;
}
.msc-score-control.is-slide-saved .msc-box { border-color: var(--primary); background: var(--primary-light); }
.msc-score-control.is-slide-saved .msc-slide-handle { border-color: var(--primary); background: var(--primary-light); }
.msc-in {
  -webkit-appearance: none; appearance: none; background: transparent; border: none; outline: none;
  color: var(--text-main); font-weight: 700; font-size: 1.05rem; line-height: 1; width: 42px;
  padding: 0; margin: 0; text-align: center; font-variant-numeric: tabular-nums; border-radius: 0;
}
.msc-in::-webkit-outer-spin-button, .msc-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.msc-slash { font-size: 1.05rem; font-weight: 500; color: var(--text-muted); line-height: 1; }
/* ปุ่มเพิ่มรายการในบล็อก */
.msc-add {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
  margin-top: 10px; padding: 9px; background: #fff; border: 1px dashed var(--msc-accent);
  border-radius: var(--radius-btn); color: var(--msc-accent); font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: var(--transition-normal);
}
.msc-add:active { transform: scale(0.98); }
.msc-add i { font-size: 1rem; }

/* แถบข้ามคน ท้ายหน้ากรอกรายคน — ไล่กรอกทั้งห้องได้โดยไม่ต้องเด้งกลับหน้ารายชื่อ */
.msc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color);
}
.msc-nav-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-btn);
  color: var(--text-main); font-size: 0.86rem; font-weight: 700; cursor: pointer;
  transition: var(--transition-normal);
}
.msc-nav-btn:active { transform: scale(0.98); }
.msc-nav-btn:disabled { opacity: 0.38; cursor: default; transform: none; }
.msc-nav-pos { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }