:root{--navy:#0b2a5b;--blue:#1559b8;--gold:#f2c14e;--bg:#eef3f9;--surface:#fff;--ink:#14233d;--muted:#5d6b80;--line:#dce4ef;--ok:#22884f;--bad:#c0392b;--head:"Prompt","Anuphan",system-ui,sans-serif;--body:"Anuphan","Prompt",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
h1,h2{font-family:var(--head);margin:0 0 1rem;line-height:1.3}
h1{font-size:1.5rem;color:var(--navy)}
h2{font-size:1.1rem;color:var(--navy);margin-top:.4rem}
a{color:var(--blue)}
input,select,textarea,button{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=file]),select,textarea{width:100%;border:1px solid var(--line);background:#f7f9fc;border-radius:10px;padding:.6em .8em}
textarea{resize:vertical}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:.4em;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:.55em 1.1em;border-radius:10px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.pri{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.del{color:var(--bad);border-color:#efc4be}
.btn.sm{padding:.3em .8em;font-size:.88rem}
.hint{color:var(--muted);font-size:.85rem}
.alert{background:#fdecea;color:#8a2318;border-radius:10px;padding:.7rem 1rem;margin-bottom:1rem}
.ok{background:#e6f5ec;color:#1c6b3e;border-radius:10px;padding:.7rem 1rem;margin-bottom:1rem}
.login-page{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,#0b2a5b,#1559b8)}
.login-box{background:var(--surface);border-radius:20px;padding:1.8rem;width:100%;max-width:400px;display:grid;gap:.9rem;box-shadow:0 20px 50px rgb(0 0 0 / .3)}
.login-box h1{text-align:center;margin:0}
.login-box .hint{text-align:center;margin:0}
.crest{width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;margin:0 auto;font-family:var(--head);border:3px solid var(--gold)}
label{display:grid;gap:.3rem;font-weight:500;font-size:.95rem}
label i{color:var(--bad);font-style:normal}
label.chk{display:flex;align-items:center;gap:.5rem;font-weight:400}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--navy);color:#dbe6fb;padding:1rem .7rem}
.side .who{padding:.4rem .7rem 1rem;border-bottom:1px solid rgb(255 255 255 / .12);margin-bottom:.6rem}
.side .who b{display:block;color:#fff}
.side .who small{opacity:.75}
.side nav{display:grid;gap:.15rem}
.side a,.side button{display:block;text-align:left;color:inherit;text-decoration:none;padding:.55rem .8rem;border-radius:10px;border:0;background:transparent;cursor:pointer;width:100%}
.side a:hover,.side button:hover{background:rgb(255 255 255 / .08)}
.side a.on{background:rgb(255 255 255 / .14);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.work{padding:1.6rem;min-width:0}
.panel{background:var(--surface);border-radius:16px;box-shadow:0 6px 20px rgb(11 42 91 / .08);padding:1.2rem;margin-bottom:1rem}
.form{display:grid;gap:.9rem;max-width:760px}
.field{display:grid;gap:.4rem;font-weight:500}
.preview{display:flex;gap:1rem;align-items:center}
.preview img{width:160px;height:100px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
.danger{margin-top:.4rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.kpi{background:var(--surface);border-radius:14px;padding:1rem;text-decoration:none;color:var(--ink);box-shadow:0 6px 20px rgb(11 42 91 / .08)}
.kpi b{display:block;font-family:var(--head);font-size:1.8rem;color:var(--navy);font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:.9rem}
.bar{display:flex;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.search{display:flex;gap:.5rem}
.search input{width:220px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:.6rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;white-space:nowrap}
.st{font-size:.8rem;padding:.1em .7em;border-radius:99px;white-space:nowrap}
.st.pub,.st.เผยแพร่{background:#e6f5ec;color:var(--ok)}
.st.draft{background:#fff3dc;color:#9a5c00}
form.inline{display:flex;gap:.4rem;align-items:center}
form.inline input{width:140px}
.pager{display:flex;gap:.4rem;flex-wrap:wrap}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{padding:.6rem}
  .side .who{display:none}
  .side nav{display:flex;overflow-x:auto;gap:.2rem}
  .side a,.side button{white-space:nowrap;width:auto}
  .side form{flex:none}
  .work{padding:1rem}
  .kpis{grid-template-columns:1fr 1fr}
  .search input{width:150px}
}
/* RWD */
.shell>*{min-width:0}
h1,h2,td,label{overflow-wrap:anywhere}
.preview{flex-wrap:wrap}
@media (max-width:760px){
  .side{position:sticky;top:0;z-index:5}
  .side nav{scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .side nav::-webkit-scrollbar{display:none}
  .bar{align-items:stretch}
  .search{flex:1}.search input{flex:1;width:auto;min-width:0}
  th,td{padding:.5rem .4rem}
  form.inline{flex-wrap:wrap}form.inline input{width:120px}
}
@media (max-width:420px){.kpis{gap:.6rem}.kpi b{font-size:1.5rem}.work{padding:.8rem}}
.form>*,.field>*{min-width:0}
input[type=file]{max-width:100%}
.form{max-width:100%}
@media (min-width:761px){.form{max-width:760px}}
/* ตารางกรอกตัวเลข (ข้อมูลนักเรียน) */
table.grid td{padding:.25rem}
table.grid input{min-width:3.6rem;padding:.45em .5em!important;text-align:center}
table.grid td:first-child input,table.grid td:last-child input{min-width:5.5rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem}
.form h3{margin:.6rem 0 0;font-size:1rem}
.form code{background:#eef3f9;border-radius:6px;padding:.05em .35em;font-size:.85em}