:root{
  --course-blue:#2563eb;
  --course-orange:#f97316;
  --course-text:#1f2937;
  --course-muted:#64748b;
  --course-line:#e2e8f0;
}

*{box-sizing:border-box}
body{margin:0;background:#f6f8fb;color:var(--course-text);font-family:"Kanit",sans-serif}
.course-page{min-height:100vh;padding:28px 0 80px;background:radial-gradient(circle at 25% 5%,#fffdf5 0,transparent 27%)}
.course-container{width:min(1280px,calc(100% - 40px));margin:0 auto}
.course-topbar{display:flex;justify-content:flex-end;min-height:46px}
.course-back{display:inline-flex;padding:10px 18px;border:1px solid var(--course-line);border-radius:999px;background:#fff;color:#334155;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(15,23,42,.08)}
.course-heading{text-align:center;margin:2px auto 38px}
.course-heading p{margin:0;color:#f59e0b;font-weight:600}
.course-heading h1{margin:6px 0 16px;font-size:clamp(34px,4vw,48px);line-height:1.12}
.course-heading>span{display:block;width:62px;height:4px;margin:auto;border-radius:99px;background:var(--course-orange)}
.course-panel{overflow:hidden;border:1px solid var(--course-line);border-radius:18px;background:#fff;box-shadow:0 14px 38px rgba(15,23,42,.08)}
.course-toolbar{display:grid;grid-template-columns:max-content minmax(220px,420px) 1fr;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--course-line);background:#fff}
.course-toolbar label{font-weight:700;color:#475569}
.course-toolbar input{width:100%;height:42px;padding:8px 15px;border:1px solid #cbd5e1;border-radius:999px;background:#f8fafc;font:500 14px "Kanit",sans-serif}
.course-toolbar input:focus{outline:3px solid rgba(37,99,235,.14);border-color:var(--course-blue);background:#fff}
.course-toolbar strong{justify-self:end;color:var(--course-muted);font-size:14px}
.course-table-wrap{width:100%;overflow-x:auto}
.course-table{width:100%;min-width:900px;border-collapse:collapse}
.course-table th,.course-table td{padding:16px 18px;border-bottom:1px solid var(--course-line);text-align:left;vertical-align:middle}
.course-table th{background:#eff6ff;color:#1e3a8a;font-size:15px;font-weight:700;white-space:nowrap}
.course-table tbody tr:nth-child(even){background:#f8fafc}
.course-table tbody tr:hover{background:#fff7ed}
.course-number-column,.course-number{width:78px;text-align:center!important}
.course-download-column,.course-download-cell{width:170px;text-align:center!important}
.course-name{min-width:320px;font-weight:600}
.course-download{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;background:var(--course-blue);color:#fff;text-decoration:none;font-size:13px;font-weight:600;box-shadow:0 6px 15px rgba(37,99,235,.2)}
.course-download:hover{background:#1d4ed8;transform:translateY(-1px)}
.course-no-file{color:#94a3b8;font-size:13px}
.course-status{padding:50px 20px;text-align:center;color:var(--course-muted)}
.course-spinner{display:inline-block;width:30px;height:30px;margin:0 12px -9px 0;border:4px solid #bfdbfe;border-top-color:var(--course-blue);border-radius:50%;animation:course-spin .75s linear infinite}
@keyframes course-spin{to{transform:rotate(360deg)}}
.course-empty,.course-error{padding:55px 20px!important;text-align:center!important;color:var(--course-muted)}
.course-error{color:#b91c1c}

@media(max-width:640px){
  .course-page{padding-top:16px}.course-container{width:min(100% - 24px,1280px)}
  .course-heading{margin-bottom:26px}
  .course-toolbar{grid-template-columns:1fr;padding:16px}
  .course-toolbar label{font-size:14px}.course-toolbar strong{justify-self:start}
}