:root{--blue: #1d4ed8;--blue-dark: #1e3a8a;--blue-soft: #eff6ff;--teal: #0d9488;--teal-dark: #0f766e;--teal-soft: #f0fdfa;--ink: #0f172a;--muted: #64748b;--line: #dbe3ee;--bg: #f6f9fc;--white: #ffffff;--red: #b91c1c;--red-soft: #fef2f2;--amber: #b45309;--amber-soft: #fffbeb;--radius: 10px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Sarabun,Noto Sans Thai,Leelawadee UI,Thonburi,Tahoma,system-ui,sans-serif;font-size:16px;line-height:1.65}h1{font-size:1.5rem;margin:0 0 .25rem;color:var(--blue-dark)}h2{font-size:1.15rem;margin:0 0 .5rem;color:var(--blue-dark)}h3{font-size:1rem;margin:0 0 .35rem}p{margin:0 0 .6rem}a{color:var(--blue)}small,.muted{color:var(--muted)}.small{font-size:.875rem}.topbar{background:var(--white);border-bottom:3px solid var(--teal);position:sticky;top:0;z-index:10}.topbar-inner{max-width:1200px;margin:0 auto;padding:.5rem 16px;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.brand{font-weight:700;font-size:1.15rem;color:var(--blue-dark);text-decoration:none;white-space:nowrap}.brand span{color:var(--teal)}.nav{display:flex;flex-wrap:wrap;gap:.25rem;flex:1}.nav a{padding:.35rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:500}.nav a:hover{background:var(--blue-soft)}.nav a.active{background:var(--blue);color:var(--white)}.userbox{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.page{max-width:1200px;margin:0 auto;padding:20px 16px 64px}.page-head{margin-bottom:16px}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}.card.tight{padding:12px}.grid{display:grid;gap:16px}.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.row.between{justify-content:space-between}.stack>*+*{margin-top:.75rem}.home-card{display:block;text-decoration:none;color:inherit;border-left:5px solid var(--teal);transition:box-shadow .15s}.home-card:hover{box-shadow:0 4px 14px #1d4ed81f}.home-card h2{color:var(--blue)}button,.btn{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--blue);background:var(--blue);color:var(--white);padding:.45rem .9rem;font-weight:600;text-decoration:none;display:inline-block;min-height:40px}button:hover:not(:disabled),.btn:hover{background:var(--blue-dark)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary,.btn.secondary{background:var(--white);color:var(--blue)}button.secondary:hover:not(:disabled),.btn.secondary:hover{background:var(--blue-soft)}button.teal{background:var(--teal);border-color:var(--teal)}button.teal:hover:not(:disabled){background:var(--teal-dark)}button.danger{background:var(--white);color:var(--red);border-color:var(--red)}button.danger:hover:not(:disabled){background:var(--red-soft)}button.link{background:none;border:none;color:var(--blue);padding:0;min-height:0;font-weight:500;text-decoration:underline}button.link:hover:not(:disabled){background:none;color:var(--blue-dark)}button.sm{padding:.2rem .6rem;min-height:32px;font-size:.875rem}label{display:block;font-weight:600;margin-bottom:.25rem}label.inline{display:flex;align-items:flex-start;gap:.5rem;font-weight:400;margin:0;cursor:pointer}label.inline input{margin-top:.4rem;flex:none}input[type=text],input[type=password],input[type=date],select,textarea{font:inherit;width:100%;padding:.5rem .65rem;border:1px solid #b8c4d6;border-radius:8px;background:var(--white);color:var(--ink)}textarea{min-height:110px;resize:vertical}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #93c5fd;outline-offset:1px}.field{margin-bottom:.85rem}.hint{font-size:.85rem;color:var(--muted);margin-top:.2rem}.badge{display:inline-block;padding:.05rem .55rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid transparent;white-space:nowrap}.badge.gray{background:#f1f5f9;color:#475569;border-color:#cbd5e1}.badge.blue{background:var(--blue-soft);color:var(--blue-dark);border-color:#bfdbfe}.badge.teal{background:var(--teal-soft);color:var(--teal-dark);border-color:#99f6e4}.badge.red{background:var(--red-soft);color:var(--red);border-color:#fecaca}.badge.amber{background:var(--amber-soft);color:var(--amber);border-color:#fde68a}.notice{border-radius:8px;padding:.65rem .85rem;margin-bottom:12px;border:1px solid}.notice.info{background:var(--blue-soft);border-color:#bfdbfe;color:var(--blue-dark)}.notice.ok{background:var(--teal-soft);border-color:#99f6e4;color:var(--teal-dark)}.notice.warn{background:var(--amber-soft);border-color:#fde68a;color:#78350f}.notice.error{background:var(--red-soft);border-color:#fecaca;color:var(--red)}.pre{white-space:pre-wrap;overflow-wrap:anywhere}.answer-box{background:#fbfdff;border:1px solid var(--line);border-radius:8px;padding:12px}.quote{border-left:4px solid var(--teal);padding:.25rem .75rem;background:var(--teal-soft);border-radius:0 8px 8px 0}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{border-bottom:1px solid var(--line);padding:.45rem .6rem;text-align:left;vertical-align:top}th{background:var(--blue-soft);color:var(--blue-dark);white-space:nowrap}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:12px}.tabs button{background:var(--white);color:var(--blue-dark);border-color:var(--line)}.tabs button.active{background:var(--blue);color:var(--white);border-color:var(--blue)}.tabs button .done{color:var(--teal);margin-left:.3rem}.tabs button.active .done{color:#99f6e4}.eval-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}@media (max-width: 860px){.eval-layout{grid-template-columns:1fr}}.scale{display:flex;flex-wrap:wrap;gap:.35rem}.scale label{margin:0;font-weight:500;border:1px solid #b8c4d6;border-radius:8px;padding:.3rem .6rem;cursor:pointer;background:var(--white);min-width:3.1rem;text-align:center}.scale label small{display:block;font-size:.72rem}.scale input{position:absolute;opacity:0;width:0;height:0}.scale label:has(input:checked){background:var(--blue);border-color:var(--blue);color:var(--white)}.scale label:has(input:checked) small{color:#dbeafe}.scale label:has(input:focus-visible){outline:3px solid #93c5fd}.scale.harm label:has(input:checked).yes{background:var(--red);border-color:var(--red)}.scale.harm label:has(input:checked).no{background:var(--teal);border-color:var(--teal)}.bar-row{display:grid;grid-template-columns:1fr auto;gap:.1rem .5rem;align-items:baseline;margin:.55rem 0;font-size:.9rem}.bar-row>span:first-child{grid-row:1;grid-column:1}.bar-row>span:last-child{grid-row:1;grid-column:2}.bar-track{grid-row:2;grid-column:1 / -1;background:#e8eef6;border-radius:6px;height:14px;overflow:hidden;display:flex}.bar-fill{height:100%}.bar-fill.blue{background:var(--blue)}.bar-fill.teal{background:var(--teal)}.bar-fill.light{background:#93c5fd}.legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--muted)}.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.3rem;vertical-align:-1px}.stat{text-align:center}.stat b{display:block;font-size:1.6rem;color:var(--blue);line-height:1.2}.center-box{max-width:440px;margin:8vh auto 0}details>summary{cursor:pointer;color:var(--blue);font-weight:600}hr{border:none;border-top:1px solid var(--line);margin:14px 0}.sticky-actions{position:sticky;bottom:0;background:var(--white);border-top:2px solid var(--teal);padding:12px 16px;margin:0 -16px -16px;border-radius:0 0 var(--radius) var(--radius)}.qcode{display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:.85em;font-weight:700;background:var(--blue-dark);color:var(--white);border-radius:6px;padding:0 .45rem;vertical-align:middle}.reference{background:var(--amber-soft);border-color:#fde68a;border-left:5px solid var(--amber);margin-bottom:0}.criterion-desc{margin-top:.4rem;padding:.4rem .6rem;background:#f8fafc;border-radius:8px;border:1px solid var(--line)}.criterion-desc>div+div{margin-top:.25rem}.stack-sm>*+*{margin-top:.3rem}input[type=file]{font:inherit;width:100%;padding:.5rem;border:1px dashed #b8c4d6;border-radius:8px;background:var(--white)}.bar-fill.red{background:var(--red)}@media (min-width: 861px){.eval-layout>.card:first-child{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto}}
