:root{--bg:#f4f7fb;--ink:#172033;--muted:#667085;--brand:#1856a5;--border:#dbe3ef;--danger:#b42318;--ok:#067647;--warn:#b54708}*{box-sizing:border-box}body{margin:0;font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}.top{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:20px;padding:12px 20px;box-shadow:0 1px 8px #0000000a}.top nav{display:flex;flex-wrap:wrap;gap:8px;flex:1}.top nav a{color:var(--brand);text-decoration:none;padding:7px 9px;border-radius:7px}.top nav a:hover{background:#eef4ff}.user{font-size:13px;color:var(--muted)}.container{max-width:1280px;margin:22px auto;padding:0 16px 80px}h1{font-size:26px}h2,h3{margin-top:0}.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;margin:14px 0;box-shadow:0 2px 7px #10182808}.narrow{max-width:520px}.hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#123f7a,#1c65bd);color:#fff;border-radius:14px;padding:20px 24px}.hero .muted{color:#d5e5ff}.clock,.controlclock{font-size:24px;font-weight:700}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}.kpis>div{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;display:flex;flex-direction:column}.kpis b{font-size:30px;color:var(--brand)}.kpis span{color:var(--muted)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn,button{display:inline-block;border:0;border-radius:8px;background:var(--brand);color:#fff;padding:9px 14px;text-decoration:none;cursor:pointer;font:inherit}.btn.secondary,button.secondary{background:#475467}.btn.danger,button.danger{background:var(--danger)}.btn.small,button.small{padding:5px 9px;font-size:13px}label{display:block;margin:10px 0;font-weight:600}input,select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:7px;padding:9px;background:#fff;font:inherit;margin-top:5px}textarea{min-height:74px;resize:vertical}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}.formgrid .wide{grid-column:1/-1}.formgrid button{align-self:end}.inline{display:flex;gap:5px;align-items:center}.inline input{margin:0;min-width:120px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;background:#fff}th,td{border-bottom:1px solid var(--border);padding:9px 8px;vertical-align:top;text-align:left}th{background:#f8fafc;position:sticky;top:0}.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef2f6;font-size:12px}.badge.pass,.badge.submitted,.badge.locked{background:#dcfae6;color:#05603a}.badge.warn,.badge.pending{background:#fef0c7;color:#93370d}.alert{border-radius:9px;padding:11px 13px;margin:12px 0;background:#eef4ff;border:1px solid #c7d7fe}.alert.error{background:#fee4e2;border-color:#fecdca;color:#912018}.alert.warn{background:#fef0c7;border-color:#fedf89;color:#7a2e0e}.alert.ok{background:#dcfae6;border-color:#abefc6;color:#05603a}.muted{color:var(--muted)}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs a{padding:8px 12px;background:#fff;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--ink)}.tabs a.active{background:var(--brand);color:white}.stickyinfo{position:sticky;top:70px;z-index:5}.save-state{float:right;color:var(--muted);font-size:13px}.rubric-item{border-top:1px solid var(--border);padding:14px 0}.rubric-title{line-height:1.55}.score-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:10px}.score-options label{margin:0;font-weight:normal}.score-options input{display:none}.score-options span{display:flex;justify-content:space-between;gap:8px;border:1px solid #cbd5e1;border-radius:8px;padding:10px;height:100%}.score-options input:checked+span{border-color:var(--brand);background:#eaf2ff;box-shadow:0 0 0 2px #b9d5ff}.score-options.compact{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.dangerbox{border-color:#fda29b}.check{font-weight:normal;padding:8px;background:#fff5f4;border-radius:7px}.check input{width:auto;margin-right:8px}.submitbar{position:fixed;bottom:0;left:0;right:0;background:#ffffffee;border-top:1px solid var(--border);padding:10px 18px;display:flex;justify-content:center;gap:12px;z-index:20}.pfrow{display:grid;grid-template-columns:2fr 160px 2fr auto;gap:8px;align-items:center;border-top:1px solid var(--border);padding:9px 0}.pfrow input,.pfrow select{margin:0}.controlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:15px}.controlslot{background:#0b2447;color:#fff;border-radius:14px;padding:18px}.controlslot .countdown{font-size:42px;font-weight:bold}.controlslot.warning{background:#8a4b00}.controlslot.ending{background:#7a1010}code{background:#eef2f6;padding:2px 5px;border-radius:4px}@media(max-width:800px){.top{display:block}.top nav{margin-top:8px}.user{display:none}.kpis{grid-template-columns:1fr 1fr}.grid2,.formgrid{grid-template-columns:1fr}.pfrow{grid-template-columns:1fr}.hero{display:block}.stickyinfo{top:110px}.container{padding-bottom:100px}}
