/* ============ ระบบรายงานผลคะแนน ============ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:'Sarabun',sans-serif; }
body { background:linear-gradient(160deg,#eef4ff 0%,#f8fbff 45%,#eef9f2 100%); min-height:100vh; color:#1e2a3a; }

.topbar { display:flex; justify-content:flex-end; padding:14px 26px; }
.btn-admin { background:#fff; color:#2456a6; border:2px solid #2456a6; padding:9px 22px; border-radius:30px;
  font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; transition:.2s; }
.btn-admin:hover { background:#2456a6; color:#fff; }

.header-band { background:linear-gradient(90deg,#1c4587,#2f6bc4); color:#fff; text-align:center;
  padding:26px 16px; border-radius:0 0 22px 22px; box-shadow:0 4px 18px rgba(28,69,135,.25); }
.header-band h2 { font-size:22px; font-weight:600; }

.footer-band { background:#1c4587; color:#dce8fb; text-align:center; padding:16px; font-size:14px;
  border-radius:22px 22px 0 0; margin-top:48px; }

.container { max-width:560px; margin:36px auto; padding:0 16px; }
.wide { max-width:1150px; }

.card { background:#fff; border-radius:18px; padding:34px 38px; box-shadow:0 10px 34px rgba(30,60,110,.12); }
.card h1 { font-size:26px; color:#1c4587; text-align:center; margin-bottom:6px; }
.card .sub { text-align:center; color:#7a8aa0; font-size:14px; margin-bottom:26px; }

.field { margin-bottom:18px; }
.field label { display:block; font-weight:600; font-size:15px; margin-bottom:7px; color:#2c3e57; }
.field input[type=text], .field input[type=password], .field input[type=number] {
  width:100%; padding:12px 15px; border:1.6px solid #ccd6e6; border-radius:11px; font-size:16px; outline:none; transition:.2s; }
.field input:focus { border-color:#2f6bc4; box-shadow:0 0 0 3px rgba(47,107,196,.14); }

.status-box { display:none; margin-top:8px; padding:10px 14px; border-radius:10px; font-size:14.5px; font-weight:600; }
.status-box.ok  { display:block; background:#e6f7ec; color:#177a3d; border:1px solid #9adbb4; }
.status-box.err { display:block; background:#fdecec; color:#c0392b; border:1px solid #f3b6b0; }

.captcha-row { display:flex; align-items:center; gap:12px; }
.captcha-q { background:#f0f5ff; border:1.6px dashed #2f6bc4; color:#1c4587; font-size:20px; font-weight:700;
  padding:10px 18px; border-radius:11px; white-space:nowrap; }
.captcha-row input { flex:1; }
.btn-refresh { background:#eef2f8; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-size:17px; }

.consent { display:flex; gap:10px; align-items:flex-start; background:#fffbe9; border:1px solid #f0dc9a;
  padding:13px 15px; border-radius:11px; margin:20px 0; font-size:14.5px; }
.consent input { margin-top:3px; transform:scale(1.25); accent-color:#1c4587; }

.btn-main { width:100%; padding:14px; background:linear-gradient(90deg,#1c4587,#2f6bc4); color:#fff; border:none;
  border-radius:12px; font-size:17px; font-weight:700; cursor:pointer; transition:.2s; }
.btn-main:disabled { background:#b9c6d8; cursor:not-allowed; }
.btn-main:not(:disabled):hover { filter:brightness(1.1); transform:translateY(-1px); }

.alert-err { background:#fdecec; color:#c0392b; border:1px solid #f3b6b0; border-radius:11px; padding:12px 15px;
  margin-bottom:18px; font-size:15px; font-weight:600; }
.alert-ok  { background:#e6f7ec; color:#177a3d; border:1px solid #9adbb4; border-radius:11px; padding:12px 15px;
  margin-bottom:18px; font-size:15px; font-weight:600; }

/* ---------- หน้ารายงาน ---------- */
.report-head { text-align:center; margin-bottom:22px; }
.report-head .title { font-size:22px; font-weight:700; color:#1c4587; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; margin:20px 0; }
.info-item { background:#f5f8fd; border-radius:11px; padding:12px 16px; }
.info-item .k { font-size:13px; color:#7a8aa0; }
.info-item .v { font-size:16.5px; font-weight:600; }

table.score { width:100%; border-collapse:collapse; margin:18px 0; }
table.score th { background:#1c4587; color:#fff; padding:12px; font-size:15px; }
table.score td { padding:11px 14px; border-bottom:1px solid #e4eaf3; font-size:15.5px; }
table.score tr.total-row td { background:#f0f5ff; font-weight:700; }
table.score td.num { text-align:center; font-weight:600; }

.badge { display:inline-block; padding:7px 26px; border-radius:30px; font-size:17px; font-weight:700; }
.badge.pass { background:#e6f7ec; color:#177a3d; border:2px solid #35b06b; }
.badge.fail { background:#fdecec; color:#c0392b; border:2px solid #e07b6f; }

.meta { display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; font-size:13.5px; color:#66788f;
  background:#f8fafc; border-radius:10px; padding:11px 15px; }

.btn-row { display:flex; gap:14px; margin-top:24px; }
.btn-dl { flex:1; padding:13px; background:#177a3d; color:#fff; border:none; border-radius:12px; font-size:16px;
  font-weight:700; cursor:pointer; text-align:center; text-decoration:none; }
.btn-out { flex:1; padding:13px; background:#c0392b; color:#fff; border:none; border-radius:12px; font-size:16px;
  font-weight:700; cursor:pointer; text-align:center; text-decoration:none; }
.btn-dl:hover, .btn-out:hover { filter:brightness(1.1); }

/* ---------- แอดมิน ---------- */
.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px; }
.dash-card { border-radius:16px; padding:24px; color:#fff; box-shadow:0 8px 22px rgba(30,60,110,.15); }
.dash-card .num { font-size:38px; font-weight:700; }
.dash-card .lbl { font-size:15px; opacity:.92; }
.dc-blue  { background:linear-gradient(135deg,#1c4587,#3d7ad1); }
.dc-green { background:linear-gradient(135deg,#177a3d,#3bb96e); }
.dc-red   { background:linear-gradient(135deg,#b03a2e,#e4705f); }

.toolbar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.tbtn { padding:11px 20px; border-radius:11px; border:none; font-size:15px; font-weight:600; cursor:pointer;
  text-decoration:none; color:#fff; display:inline-flex; align-items:center; gap:8px; }
.tb-blue{background:#2f6bc4;} .tb-orange{background:#d68910;} .tb-red{background:#c0392b;}
.tb-teal{background:#148f77;} .tb-gray{background:#5d6d7e;}
.tbtn:hover{filter:brightness(1.12);}

.panel { background:#fff; border-radius:16px; padding:26px 30px; box-shadow:0 8px 26px rgba(30,60,110,.1); margin-bottom:24px; }
.panel h3 { color:#1c4587; margin-bottom:16px; font-size:18px; border-left:5px solid #2f6bc4; padding-left:11px; }

table.list { width:100%; border-collapse:collapse; font-size:14px; }
table.list th { background:#eef3fb; color:#1c4587; padding:10px 8px; white-space:nowrap; }
table.list td { padding:9px 8px; border-bottom:1px solid #edf1f7; }
table.list tr:hover td { background:#f7faff; }

.paging { display:flex; gap:7px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.paging a, .paging span { padding:7px 14px; border-radius:9px; text-decoration:none; font-size:14px;
  border:1.4px solid #ccd6e6; color:#2456a6; font-weight:600; }
.paging .cur { background:#1c4587; color:#fff; border-color:#1c4587; }

@media (max-width:760px){
  .dash-grid{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .card{padding:26px 20px;}
}