[hidden] { display: none !important; }
/* KPCambodianmathematics — exam studio, classroom and student portal */
.tp-hero { padding: 34px 0 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tp-hero h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 0; }
.tp-hero p { margin: 8px 0 0; color: var(--ink-2); max-width: 820px; }
.tp-main { padding: 26px 0 80px; }
.tp-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.tp-layout > * { min-width: 0; }
.tp-side { position: sticky; top: calc(var(--header-h) + 14px); max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; }
.card-p { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.card-p + .card-p { margin-top: 14px; }
.card-p h2, .card-p h3 { margin: 0 0 12px; font-size: 18px; }
.card-p h3 { font-size: 16px; }
.fld { display: block; margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.fld > span { display: block; margin-bottom: 4px; font-weight: 600; }
.fld input, .fld select, .fld textarea, .inp {
  width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg);
  color: var(--ink); font: inherit; font-size: 14.5px;
}
.fld textarea { min-height: 70px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .inp:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: transparent; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.chk { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--teal); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-xs { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.btn-danger { background: var(--rose-soft); color: var(--rose); border: 1px solid transparent; }
.muted { color: var(--ink-3); font-size: 13.5px; }
.note-box { padding: 10px 14px; border-radius: 10px; background: var(--amber-soft); color: var(--ink-2); font-size: 14px; }
.note-box.ok { background: var(--teal-soft); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { padding: 6px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--teal); font-weight: 700; box-shadow: var(--shadow-sm); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-2); font: inherit; font-size: 14.5px; cursor: pointer; }
.tabs button.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 700; }
.lesson-pick { max-height: 340px; overflow-y: auto; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.lesson-pick details { margin: 2px 0; }
.lesson-pick summary { cursor: pointer; padding: 4px 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.lesson-pick .chk { margin-left: 18px; font-size: 13.5px; }
.lesson-pick .chk small { color: var(--ink-3); }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pv-bar .seg { margin-right: auto; }
.empty { padding: 60px 20px; text-align: center; color: var(--ink-3); border: 2px dashed var(--line-2); border-radius: var(--radius); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99; padding: 10px 18px; border-radius: 12px; background: var(--brand); color: #fff; box-shadow: var(--shadow); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.show { opacity: 1; }

/* ------------------------------------------------ exam paper (A4 sheet) */
.kp-sheet-wrap { overflow-x: auto; }
.kp-paper.ls-paper { width: 100%; max-width: 820px; margin: 0 auto 22px; padding: 40px 48px 34px; border-radius: 4px; font-size: 15.5px; line-height: 1.85; }
.kp-head { margin-bottom: 10px; }
.kp-kingdom { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; font-family: 'Khmer OS Muol Light', 'Moul', var(--font); font-size: 16px; line-height: 1.8; }
.kp-orn { color: #555; letter-spacing: 6px; font-size: 14px; }
.kp-org { font-size: 14.5px; line-height: 1.6; min-height: 4px; }
.kp-title { margin: 10px 0 2px; text-align: center; font-size: 21px; color: #222; }
.kp-ver { color: var(--coral-d); font-size: 17px; }
.kp-info { text-align: center; font-size: 14.5px; color: #333; }
.kp-student { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 10px 0 6px; padding: 8px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; font-size: 14.5px; }
.kp-instr { margin: 8px 0; font-size: 14.5px; }
.kp-paper h2.kp-sec { margin: 20px 0 6px; padding: 2px 0 2px 10px; font-size: 17px; border-left-width: 4px; }
.kp-note { margin: 0 0 6px; color: #555; font-size: 14px; }
.kp-mcq, .kp-wr { margin: 0; padding: 0; list-style: none; }
.kp-q { display: flex; gap: 6px; margin: 0 0 10px; break-inside: avoid; page-break-inside: avoid; }
.kp-qn { flex: none; min-width: 1.8em; font-weight: 700; }
.kp-qb { flex: 1; min-width: 0; }
.kp-stem > :last-child, .kp-wq > :last-child { margin-bottom: 0; }
.kp-opts { display: grid; gap: 2px 14px; margin: 2px 0 0 4px; }
.kp-opts.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kp-opts.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kp-opts.c1 { grid-template-columns: 1fr; }
.kp-opt { min-width: 0; }
.kp-opt .kp-ok { font-weight: 700; margin-right: 2px; }
.kp-opt.right { background: #e6f4ea; border-radius: 6px; outline: 1px solid #8cc79a; }
.kp-w { margin: 0 0 14px; break-inside: avoid-page; }
.kp-wh { margin-bottom: 2px; }
.kp-pts { color: #666; font-size: 14px; }
.kp-wq { padding-left: 10px; }
.kp-sol { margin: 6px 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #f3f6f4; border-left: 3px solid #3b8686; font-size: 14.5px; }
.kp-end { margin-top: 18px; text-align: center; font-weight: 700; }
.kp-paper ol.olka { counter-reset: ka; list-style: none; padding-left: 1.2em; }
.kp-paper ol.olka > li { counter-increment: ka; position: relative; }
.kp-paper ol.olka > li::before { position: absolute; left: -1.3em; font-weight: 700; content: counter(ka, khmer-letter) '.'; }
@counter-style khmer-letter { system: alphabetic; symbols: 'ក' 'ខ' 'គ' 'ឃ' 'ង' 'ច' 'ឆ' 'ជ' 'ឈ' 'ញ' 'ដ' 'ឋ'; }
.kp-paper ol.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.kp-paper ol.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
.kp-paper ol.cols4, .kp-paper ol.cols5 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
.kp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; }
.kp-tools button { padding: 1px 8px; border-radius: 6px; border: 1px solid #c9d6d4; background: #fff; color: #2c6464; font: inherit; font-size: 12.5px; cursor: pointer; }
.kp-tools button:hover { background: #e6f2f0; }
.kp-tools small { color: #888; }
.kp-tools input { width: 60px; padding: 0 4px; border: 1px solid #c9d6d4; border-radius: 5px; font: inherit; }
.kp-wh .kp-tools { display: inline-flex; margin: 0 0 0 10px; }
.kp-grid { margin: 14px 0 6px; padding: 10px 12px; border: 1px solid #999; border-radius: 6px; font-size: 13.5px; break-inside: avoid; }
.kp-grid-cols { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }
.kp-grid table { border-collapse: collapse; }
.kp-grid td { padding: 1px 3px; }
.kp-grid td.n { text-align: right; font-weight: 700; padding-right: 6px; }
.kp-grid .bub { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid #555; border-radius: 50%; font-size: 12px; line-height: 1; }
table.kp-keytab { border-collapse: collapse; margin: 6px 0 12px; }
table.kp-keytab td { border: 1px solid #aaa; padding: 3px 10px; font-size: 14.5px; }

/* ------------------------------------------------ gradebook tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table.gb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.gb th, table.gb td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
table.gb th { position: sticky; top: 0; background: var(--surface-2); color: var(--ink-2); font-weight: 700; z-index: 1; }
table.gb td.l, table.gb th.l { text-align: left; }
table.gb tr:hover td { background: var(--surface-2); }
table.gb input.sc { width: 70px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: inherit; text-align: center; }
table.gb input.sc.bad { border-color: var(--rose); background: var(--rose-soft); }
table.gb .avg { font-weight: 700; color: var(--teal); }
.g-A, .g-B { color: #2b8a3e; font-weight: 700; } .g-C, .g-D { color: var(--blue); font-weight: 700; } .g-E { color: var(--amber); font-weight: 700; } .g-F { color: var(--rose); font-weight: 700; }
.pill-s { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 1.8; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.pill-s.on { background: var(--teal-soft); color: var(--teal); border-color: transparent; }
.pill-s.warn { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.cls-list { margin: 0; padding: 0; list-style: none; }
.cls-list button { display: block; width: 100%; margin: 0 0 6px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cls-list button.on { border-color: var(--teal); background: var(--teal-soft); }
.cls-list small { display: block; color: var(--ink-3); font-size: 12.5px; }
.code-big { display: inline-block; padding: 2px 12px; border-radius: 9px; background: var(--brand); color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: 3px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 14px; }
.stat { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.stat b { display: block; font-size: 22px; color: var(--teal); }
.stat span { font-size: 13px; color: var(--ink-3); }
.cards-print { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.login-card { padding: 12px; border: 1px dashed #777; border-radius: 8px; font-size: 13.5px; line-height: 1.7; break-inside: avoid; background: #fff; color: #222; }
.login-card b { font-size: 15px; }
.report-card { max-width: 820px; margin: 0 auto 24px; padding: 34px 40px; background: #fff; color: #222; border: 1px solid var(--line); border-radius: 4px; }
.report-card table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.report-card td, .report-card th { border: 1px solid #999; padding: 4px 8px; text-align: center; }
.report-card td.l { text-align: left; }
.sign-row { display: flex; justify-content: space-between; margin-top: 28px; font-size: 14px; text-align: center; }

/* ------------------------------------------------ student exam */
.st-q { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: #fff; color: #333; border: 1px solid var(--line); }
.st-opts { display: grid; gap: 6px; margin-top: 8px; }
.st-opts label { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 9px; border: 1px solid #dde5e2; cursor: pointer; }
.st-opts label:has(input:checked) { border-color: #2e7a70; background: #e3f1ed; }
.st-opts input { margin-top: 6px; accent-color: #2e7a70; }
.st-bar { position: sticky; top: var(--header-h); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.st-timer { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--teal); }
.st-timer.low { color: var(--rose); }

@media (max-width: 980px) {
  .tp-layout { grid-template-columns: 1fr; }
  .tp-side { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .kp-paper.ls-paper { padding: 22px 16px; font-size: 14.5px; }
  .kp-opts.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-print { grid-template-columns: 1fr 1fr; }
  .row3 { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------ print */
#print-area { display: none; }
@media print {
  @page { size: A4; margin: 14mm 13mm 14mm 15mm; }
  html, body { background: #fff !important; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block !important; }
  #print-area .kp-paper, #print-area .report-card { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; font-size: 12.5pt; }
  #print-area .pb { break-after: page; page-break-after: always; }
  #print-area .kp-opt.right { background: none; outline: 0; text-decoration: underline; font-weight: 700; }
  .no-print, .kp-tools { display: none !important; }
  .cards-print { grid-template-columns: repeat(3, 1fr); }
  table.gb { font-size: 10.5pt; }
  table.gb th { position: static; }
  table.gb th, table.gb td { border: 1px solid #888; padding: 3px 5px; }
  .tbl-wrap { border: 0; overflow: visible; }
}

/* admin lock */
.kp-lock { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10, 20, 30, .72); backdrop-filter: blur(6px); }
.kp-lock form { width: min(420px, 100%); }
.admin-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }