:root{--navy:#112b53;--navy2:#183f70;--gold:#d6a244;--bg:#f5f7fb;--white:#fff;--ink:#13223a;--muted:#65748a;--line:#e6eaf1;--green:#1d9466;--red:#c04b4d;--shadow:0 10px 30px rgba(17,43,83,.07)}
*{box-sizing:border-box}
html,body{margin:0;font:15px/1.55 'Noto Sans Thai','Sarabun',Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}
.top{background:linear-gradient(112deg,#102649 0%,#194d80 65%,#1b5d80 100%);color:#fff;padding:20px max(calc((100vw - 1160px)/2),24px);position:relative;overflow:hidden}
.top:after{content:'★';position:absolute;font-size:220px;color:#fff;opacity:.045;right:7%;top:-120px;pointer-events:none}
.brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.logo{width:72px;height:72px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 8px #0006)}
.tagline{color:#f5d37e;font-weight:700}
.loginlogo{width:min(220px,60vw);height:auto;display:block;margin:0 auto 6px}
.brand h1{font-size:23px;line-height:1.2;margin:0}.brand p{margin:2px 0 0;color:#cfdeec;font-size:13px}
.topright{margin-left:auto;text-align:right;font-size:13px;color:#dceaf5}
.topright button{margin-top:4px;background:transparent;border:1px solid #ffffff55;color:#fff;border-radius:100px;padding:4px 12px;font-size:12px}
.page{max-width:1160px;margin:0 auto;padding:22px 18px 55px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{border:1px solid var(--line);background:#fff;padding:10px 18px;border-radius:11px;font-weight:700;color:var(--muted);position:relative}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.tab .count{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:100px;background:var(--gold);color:#26324a;font-size:11px}
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(275px,.8fr);gap:18px}
.card{background:#fff;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);padding:22px;margin-bottom:17px}
.card h2{font-size:18px;margin:0 0 5px}.sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px}
.input,textarea,select{width:100%;border:1px solid #dce2eb;background:#fff;border-radius:10px;padding:11px 12px;color:var(--ink);outline:none}
.input:focus,textarea:focus,select:focus{border-color:#4d83ba;box-shadow:0 0 0 3px #aecdeb44}
textarea{min-height:108px;resize:vertical}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;border:none;background:var(--navy);color:#fff;font-weight:700;text-decoration:none}
.btn.secondary{background:#eef2f8;color:#1d416a}.btn.gold{background:var(--gold);color:#26324a}.btn.green{background:var(--green)}.btn.red{background:#fff0ee;color:#a44141}
.btn.small{font-size:12px;padding:8px 12px}
.btn:focus-visible,.tab:focus-visible{outline:3px solid #e5b755}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;padding:4px 9px;font-size:11px;font-weight:700;border-radius:100px;background:#eef1f6;color:#556a83;white-space:nowrap}
.pill.pending_review,.pill.pending_lead,.pill.requested{background:#fff4da;color:#90600a}
.pill.approved,.pill.fulfilled{background:#e8f6ef;color:#0f8055}
.pill.returned{background:#ebf0fa;color:#3a67a3}
.pill.rejected,.pill.reversed,.pill.cancelled{background:#fcecec;color:#a53b4d}
.pill.warning{background:#fff1e4;color:#a65a14}
.ai{background:linear-gradient(130deg,#f0f6ff,#faf5ff);border:1px solid #dfe8f9;border-radius:14px;padding:14px;margin-top:14px}
.aihead{display:flex;justify-content:space-between;align-items:center}
.metric{font-size:25px;font-weight:800;color:#256f57}
.result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.result b{font-size:13px}
.mini{color:var(--muted);font-size:11px}
.notice{padding:11px 13px;border-radius:10px;background:#f7f9fc;border:1px solid var(--line);font-size:13px;margin:12px 0}
.notice.warn{background:#fff7e7;border-color:#eed3a3;color:#7e530b}.notice.ok{background:#ecf8f1;border-color:#b9e6ce;color:#12784f}.notice.err{background:#fcecec;border-color:#efc4c4;color:#a53b4d}
.balance{background:linear-gradient(140deg,#113463,#0c4d78);border-radius:15px;color:#fff;padding:22px;position:relative;overflow:hidden}
.balance:after{content:'✦';font-size:130px;position:absolute;right:-4px;top:-32px;opacity:.11}
.balance .num{font-size:47px;font-weight:800;line-height:1.2;margin:8px 0 4px}.balance small{color:#dceaf5}
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.stat{background:#fafbff;border:1px solid var(--line);padding:13px;border-radius:12px}.stat b{display:block;font-size:19px}
.item{border-top:1px solid var(--line);padding:13px 0}.item:first-child{border-top:0}.item p{margin:4px 0;font-size:13px}
.metarow{display:flex;gap:7px;justify-content:space-between;align-items:center}
.date{font-size:11px;color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:13px}
.teacherCard{border:1px solid var(--line);border-radius:13px;padding:16px;margin:14px 0;background:#fff}
.teacherCard p{margin:8px 0}
.line{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}
.griddec{display:grid;grid-template-columns:1fr 110px 1.4fr;gap:10px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 17px}
.kpi .card{margin:0;padding:16px}.kpi b{font-size:26px;color:var(--navy)}.kpi small{display:block;color:var(--muted)}
.table{border-collapse:collapse;width:100%;font-size:13px}
.table td,.table th{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.table th{background:#f5f7fb;color:#5e6c7d}
.tablewrap{overflow-x:auto}
.rewards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.reward{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:6px}
.reward .icon{font-size:30px}.reward .cost{font-weight:800;color:var(--navy)}
.badgeicon{display:inline-grid;place-items:center;width:37px;height:37px;background:#fff2d8;border-radius:10px;margin-bottom:9px}
.login{max-width:440px;margin:30px auto;text-align:center}
.gbtn{background:#fff;color:#1f2937;border:1px solid #dadce0;font-weight:700}
.footer{text-align:center;font-size:12px;color:var(--muted);margin:30px auto;padding:0 16px}
.hide{display:none!important}
.toast{position:fixed;right:20px;bottom:20px;padding:12px 16px;border-radius:12px;background:#1d3e68;color:#fff;box-shadow:var(--shadow);font-weight:600;font-size:13px;z-index:4;max-width:380px}
.toast.err{background:#a53b4d}
details summary{cursor:pointer;font-size:13px;color:#1d416a;font-weight:700}
@media(max-width:740px){
  .top{padding:18px}.brand h1{font-size:18px}.brand p{font-size:10px}.logo{width:56px;height:56px}
  .topright{font-size:11px}
  .page{padding:16px 12px}.split,.twocol,.griddec{grid-template-columns:1fr}.card{padding:16px}
  .kpi{grid-template-columns:1fr 1fr}.tab{padding:8px 11px;font-size:12px}.balance .num{font-size:39px}
  .toast{left:12px;right:12px;bottom:12px}
}