body{margin:0;color:#1e293b;background:#f9fafc;font:16px/1.65 Anuphan,system-ui,sans-serif}*{box-sizing:border-box}
.lab-top{padding:14px 26px;background:#fff;border-bottom:1px solid #1a20321a;display:flex;gap:18px;align-items:center}
.lab-top b{white-space:nowrap}.lab-top small{color:#5c6478}
.lab-shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:calc(100vh - 70px)}
nav{padding:22px 14px;border-right:1px solid #1a20321a;background:#fff}
nav a{display:block;padding:10px 14px;margin-bottom:5px;color:#5c6478;border-radius:11px;text-decoration:none;white-space:nowrap}
nav a.on{background:#1e293b;color:#fff}
main{padding:30px 38px;max-width:1100px;width:100%;min-width:0}
h1{font-size:30px;line-height:1.3;margin:0 0 14px}
h2{font-size:20px;margin:0 0 10px}
h3{font-size:15px;margin:0 0 10px;color:#5c6478}
p{margin:10px 0}
section,form,article{padding:22px;border:1px solid #1a20321a;border-radius:14px;background:#fff;margin:18px 0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid article{margin:10px 0}
.grid strong{display:block;font-size:28px}
.grid small{color:#5c6478}
button,.button{display:inline-block;border:0;border-radius:10px;background:#1e293b;color:#fff;padding:10px 16px;cursor:pointer;font:inherit;text-decoration:none}
button:disabled{opacity:.5;cursor:default}
button.ghost{background:#fff;color:#1e293b;border:1px solid #1a203233}
button.danger{background:#fff;color:#b3261e;border:1px solid #dc262640}
label{display:block;margin:12px 0;max-width:520px}
label.wide{max-width:none}
input,select,textarea{display:block;width:100%;padding:10px;border:1px solid #1a203233;border-radius:8px;font:inherit;background:#fff}
textarea{resize:vertical;font-family:ui-monospace,Consolas,monospace;font-size:13.5px}
a{color:#0f766e}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid #1a20321a;overflow:hidden;text-overflow:ellipsis}
th{color:#5c6478;font-size:14px}
.resizable-th{position:relative;padding-right:20px}
.col-resizer{position:absolute;right:0;top:0;width:10px;height:100%;cursor:col-resize;touch-action:none}
.col-resizer:hover,.col-resizer:active{background:#1a20321a}
.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow:auto;background:#fff;border:1px solid #1a20321a;border-radius:14px}
#message{position:sticky;bottom:0;background:#1e293b;color:white;margin:0;padding:0 24px;z-index:20}
#message:not(:empty){padding:14px 24px}
#stage-note{max-width:900px}
form form{padding:0;border:0}
.hint{font-size:13.5px;color:#5c6478;background:#1a20320a;border:1px solid #1a20321a;border-radius:10px;padding:10px 14px;margin:0 0 18px}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 10px;border-radius:9999px;border:1px solid;white-space:nowrap}
.pill.ok{color:#0f766e;border-color:#10b98161;background:#10b9810f}
.pill.warn{color:#92660b;border-color:#eab30866;background:#eab3080f}
.pill.gray{color:#5c6478;border-color:#1a203233;background:#1a20320a}
.rowline{display:grid;grid-template-columns:1fr 1fr 120px 120px 40px;gap:10px;align-items:end;margin-bottom:10px}
.rowline label{margin:0}
.muted{color:#5c6478}
.hover-popup{display:none;position:fixed;z-index:300;background:#fff;border:1px solid #1a203233;border-radius:12px;box-shadow:0 16px 40px -10px rgba(26,32,50,.28);padding:14px 16px;font-size:13px;line-height:1.6;max-width:340px;white-space:normal}
.hover-popup.show{display:block}
.hover-popup h4{margin:0 0 6px;font-size:15px;font-family:inherit}
.hover-popup .hp-sec{margin-top:10px;font-weight:600;color:#5c6478;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.hover-popup ul{margin:4px 0 0;padding-left:18px}
.hover-popup li{margin:2px 0}
.rowline button{padding:10px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.detail-grid label{margin:8px 0}
.back{display:inline-block;margin-bottom:14px;color:#5c6478;text-decoration:none}
.back:hover{color:#1e293b}
@media(max-width:760px){
  .lab-top{display:block;padding:14px 18px}
  .lab-shell{grid-template-columns:1fr;align-content:start}
  nav{display:flex;flex-wrap:wrap;gap:2px;padding:10px;border-right:0;border-bottom:1px solid #1a20321a}
  nav a{padding:6px 10px;margin:0;font-size:14px}
  main{padding:22px 18px}
  .grid{grid-template-columns:1fr 1fr}
  .grid article{margin:0}
  .grid strong{font-size:24px}
  h1{font-size:26px}
  section,form{padding:16px}
  .rowline{grid-template-columns:1fr;gap:6px}
  .detail-grid{grid-template-columns:1fr}
  table.tbl,.table-wrap table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}