/* S7 · Academic Center · ส่วนเพิ่มของหน้าผู้เรียน/ผู้ประเมิน (ใช้โทเคนธีมจาก agri.css เท่านั้น · ไม่มีสีเขียนตาย)
 * ★ ตัวอักษร calc((ฐาน + var(--fsadd)) * var(--fs)) · มุม 4·8·12·16 · ปุ่ม 12 · fit-width · กริด 1/2/3 คอลัมน์
 */
.lnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--gap); padding: 0; list-style: none; }
.lnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.lnav a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.lnav svg { width: 20px; height: 20px; }
.courses { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: 0 0 var(--gap); padding: 0; list-style: none; }
@media (min-width: 768px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.course-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.course-card .code { color: var(--mut); font-variant-numeric: tabular-nums; font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.course-card h2 { margin: 0; font-size: calc((18px + var(--fsadd)) * var(--fs)); line-height: 1.4; }
.course-card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--mut); font-size: calc((14px + var(--fsadd)) * var(--fs)); }
.course-card .go { justify-self: start; }
.prog { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.prog > span { display: block; height: 100%; background: var(--accent); }
.steps { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 var(--gap); padding: 0; list-style: none; counter-reset: st; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.steps li::before { counter-increment: st; content: counter(st); display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.steps li.done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.steps li.now { border-color: var(--accent); }
.steps li.now::before { background: var(--accent); color: var(--accent-ink); }
.reader { max-width: 760px; }
.reader p { margin: 0 0 12px; }
.reader ul, .reader ol { margin: 0 0 12px; padding-left: 24px; }
.reader li { margin: 0 0 4px; }
.keys { margin: 0 0 var(--gap); padding: 16px; border-radius: 12px; background: var(--accent-soft); }
.keys h3 { margin: 0 0 8px; font-size: calc((16px + var(--fsadd)) * var(--fs)); }
.keys ul { margin: 0; padding-left: 20px; }
.q { margin: 0 0 16px; padding: 0; border: 0; }
.q legend { padding: 0; margin: 0 0 8px; font-weight: 700; }
.q .choice { margin: 0 0 8px; }
.q .why { margin: 4px 0 0; color: var(--mut); font-size: calc((14px + var(--fsadd)) * var(--fs)); }
.q.wrong legend { color: var(--err); }
.timer { position: sticky; top: 8px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 700; }
.crit { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .crit { grid-template-columns: 1fr auto; } }
.crit .yn { display: flex; gap: 8px; }
.crit .yn label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line); }
.crit .yn input { width: 20px; height: 20px; accent-color: var(--accent); }
.crit .tag { margin-right: 8px; }
.cert { max-width: 860px; margin: 0 auto var(--gap); padding: 32px 24px; border-radius: 16px; border: 2px solid var(--accent); background: var(--card); text-align: center; }
.cert h1 { margin: 8px 0; font-size: calc((26px + var(--fsadd)) * var(--fs)); }
.cert .who { display: block; margin: 16px 0 8px; font-size: calc((24px + var(--fsadd)) * var(--fs)); font-weight: 700; }
.cert .qr { width: 140px; height: 140px; margin: 16px auto 8px; padding: 8px; border-radius: 12px; background: #FFFFFF; }
.cert .qr svg { width: 100%; height: 100%; display: block; }
.verdict { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 12px; font-weight: 700; }
.verdict.ok { background: var(--ok-soft); color: var(--ok); }
.verdict.bad { background: var(--err-soft); color: var(--err); }
.verdict.unk { background: var(--warn-soft); color: var(--warn); }
.share-url { display: block; padding: 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
@media print { .lnav, header.top, .noprint { display: none !important; } .cert { border-width: 3px; } }
/* ช่องเลือกไฟล์: ใช้ฟอนต์ธีม · ปุ่มในช่องมุม 12 (เบราว์เซอร์วาดปุ่มเอง) */
input[type="file"] { font: inherit; max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; min-height: 40px; margin-right: 12px; padding: 4px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }