/* PPM — ธีมสำหรับเด็ก ป.5: ปุ่มใหญ่ ตัวหนังสือชัด สีคู่ไอคอนเสมอ */
:root{
  --blue:#2b6cb0; --blue-d:#1a4e85; --green:#2f855a; --amber:#b7791f;
  --red:#c53030; --bg:#f5f8fc; --card:#ffffff; --ink:#1a2333; --muted:#5a6b85;
  --radius:16px; --shadow:0 2px 8px rgba(20,40,80,.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{font-size:17px}
body{margin:0; font-family:"Sarabun","TH Sarabun New","Leelawadee UI",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); padding-bottom:84px}
#demoBanner{background:#fff3cd; color:#7a5b00; border-bottom:2px solid #e6c94c;
  text-align:center; padding:6px 10px; font-weight:700; font-size:.85rem}
main{max-width:720px; margin:0 auto; padding:16px}
h1{font-size:1.5rem; margin:.4em 0} h2{font-size:1.2rem; margin:.5em 0}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; margin:12px 0}
button, .btn{font-family:inherit; font-size:1.05rem; font-weight:700; border:0;
  border-radius:14px; padding:14px 20px; min-height:48px; min-width:48px;
  background:var(--blue); color:#fff; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; gap:8px}
button:focus-visible,.btn:focus-visible, a:focus-visible{outline:4px solid #ffb703; outline-offset:2px}
button.secondary{background:#e6eef8; color:var(--blue-d)}
button.good{background:var(--green)} button.warn{background:var(--amber)} button.danger{background:var(--red)}
button:disabled{opacity:.45; cursor:not-allowed}
.big{width:100%; font-size:1.15rem; padding:16px}
.choice{display:block; width:100%; text-align:left; margin:8px 0; background:#eef3fa; color:var(--ink);
  border:3px solid transparent}
.choice[aria-pressed="true"]{border-color:var(--blue); background:#dce9f8}
.choice.correct{border-color:var(--green); background:#e2f4e9}
.choice.wrong{border-color:var(--red); background:#fbe4e4}
.grid{display:grid; gap:10px}
.grid.s2{grid-template-columns:repeat(2,1fr)} .grid.s3{grid-template-columns:repeat(3,1fr)}
.grid.s4{grid-template-columns:repeat(4,1fr)}
@media(max-width:420px){ .grid.s4{grid-template-columns:repeat(3,1fr)} }
.pill{display:inline-flex; align-items:center; gap:6px; background:#e6eef8; color:var(--blue-d);
  border-radius:999px; padding:4px 12px; font-weight:700; font-size:.9rem; margin:2px}
.pill.ok{background:#e2f4e9; color:var(--green)} .pill.no{background:#fbe4e4; color:var(--red)}
.bar{background:#e3eaf4; border-radius:999px; height:18px; overflow:hidden; position:relative}
.bar>span{display:block; height:100%; background:var(--green); border-radius:999px; min-width:6px}
.bar em{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:.75rem; font-weight:700; color:#123}
.feedback{border-radius:12px; padding:12px 14px; margin:10px 0; font-weight:600}
.feedback.ok{background:#e2f4e9; color:#1d5c3d; border:2px solid #77c79a}
.feedback.try{background:#fff3cd; color:#6b4d00; border:2px solid #e6c94c}
.muted{color:var(--muted); font-size:.92rem}
input, select, textarea{font-family:inherit; font-size:1.05rem; padding:12px; border-radius:12px;
  border:2px solid #c6d3e4; width:100%; background:#fff}
label{font-weight:700; display:block; margin:10px 0 4px}
table.t{width:100%; border-collapse:collapse; font-size:.92rem}
table.t th, table.t td{border:1px solid #d7e0ec; padding:6px 8px; text-align:center}
table.t th{background:#e6eef8}
#bottomNav{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:2px solid #dbe4f0;
  display:flex; justify-content:space-around; padding:6px 4px; z-index:50}
#bottomNav button{background:none; color:var(--blue-d); flex-direction:column; gap:2px;
  font-size:.8rem; padding:8px 12px; min-width:64px}
#bottomNav button[aria-current="true"]{background:#e6eef8; border-radius:12px}
#bottomNav .ic{font-size:1.4rem}
.starbtns button{font-size:1.2rem}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.kbd-skip{position:absolute; left:-9999px} .kbd-skip:focus{position:static}
.wstep{border-left:4px solid var(--blue); padding:6px 12px; margin:6px 0; background:#f2f7fd; border-radius:0 10px 10px 0}
.badge-demo{background:#fff3cd; color:#7a5b00; border-radius:8px; padding:2px 8px; font-size:.75rem; font-weight:700}

/* ---------- Dashboard ครู: กราฟ / KPI / รายงาน (เฟส B) ---------- */
.cbar{display:flex; align-items:center; gap:10px; margin:7px 0}
.cbar-l{flex:0 0 42%; font-size:.9rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cbar .bar{flex:1}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:520px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:#eef3fa; border-radius:14px; padding:12px; text-align:center; display:flex; flex-direction:column; gap:2px}
.kpi.warn{background:#fff3cd}
.kpi-n{font-size:1.5rem; font-weight:800; color:var(--blue-d)} .kpi-n small{font-size:.8rem; color:var(--muted); font-weight:600}
.kpi.warn .kpi-n{color:var(--amber)}
.kpi-l{font-size:.8rem; color:var(--muted); font-weight:600}
.radar-wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
.prc-legend{display:flex; flex-direction:column; gap:5px; align-items:flex-start}
.prc-legend .pill{font-size:.82rem}
tr.rowlink{cursor:pointer} tr.rowlink:hover td{background:#eef5ff}
button.tiny{font-size:.85rem; padding:6px 12px; min-height:34px; min-width:auto}
td.cell-weak{background:#fbe4e4; color:var(--red); font-weight:700}

/* ---------- โหมดพิมพ์ / บันทึก PDF ---------- */
@media print{
  #bottomNav, #demoBanner, .noprint{display:none !important}
  body{background:#fff; padding:0}
  main{max-width:100%}
  .card{box-shadow:none; border:1px solid #cdd8e6; break-inside:avoid; margin:8px 0}
  button{display:none !important}
  .report-head button{display:none !important}
}