*{box-sizing:border-box;}
body{
  font-family:system-ui,"Noto Sans",sans-serif;
  margin:0; display:flex; flex-direction:column; height:100vh;
}
header{
  background:#1f2937; color:#fff; padding:.6rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem;
}
h1{margin:0;font-size:1.2rem;}
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
input[type=text],input[type=search],select{
  padding:.3rem .5rem;border:1px solid #d1d5db;border-radius:.25rem;
}
.btn{
  padding:.3rem .6rem;font-size:.85rem;
  border:1px solid #c4c4c4;background:#f3f4f6;border-radius:.25rem;
  cursor:pointer;
}
.btn-primary{background:#3b82f6;border-color:#2563eb;color:#fff;}
.btn:hover{opacity:.88;}
main{
  flex:1; overflow:auto;  /* 原生捲軸 */
}
table{
  border-collapse:collapse;
  width:max-content;      /* 讓水平卷軸自然出現 */
  min-width:100%;
  font-size:.83rem;
}
th,td{border:1px solid #e5e7eb;padding:.3rem .45rem;white-space:nowrap;}
thead{background:#e5e7eb;position:sticky;top:0;z-index:1;}
tr:nth-child(even){background:#fafafa;}

.btn-edit{background:#3b82f6;border-color:#2563eb;color:#fff;}
.btn-del {background:#ef4444;border-color:#dc2626;color:#fff;}
.btn-edit,.btn-del{padding:.15rem .45rem;font-size:.75rem;border-radius:.2rem;}

#colPicker{padding:.4rem .7rem;border-bottom:1px solid #e5e7eb;}
details>summary{cursor:pointer;font-weight:600;margin:.3rem 0;}
.chk-grid{display:flex;flex-wrap:wrap;gap:.6rem .8rem;padding:.2rem .1rem;}
.chk{display:flex;align-items:center;gap:.25rem;font-size:.83rem;}
.chk input{accent-color:#3b82f6;}