:root{
    --bg:#f4f5f2; --panel:#ffffff; --ink:#1f2328; --muted:#6b7068; --line:#dcdfd7;
    --accent:#2f6b4f; --accent-ink:#ffffff; --accent-soft:#e3efe8;
    --warn:#a8461f; --pink:#ffc0c0; --green:#c0ffc0; --hl:#ffdca8; --sel:#fff3b0;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font:14px/1.4 "Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column}
  header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--accent);color:var(--accent-ink)}
  header h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.5px}
  header .sub{opacity:.75;font-size:12px}
  header .spacer{flex:1}
  .nav{display:flex;gap:4px;margin-left:12px}
  .nav a{color:#fff;opacity:.7;text-decoration:none;padding:4px 10px;border-radius:6px;font-size:13px}
  .nav a.on{opacity:1;background:#ffffff22}
  .nav a:hover{opacity:1}
  button.ghost{background:transparent;color:#fff;border-color:#ffffff55;height:28px}
  .panel{background:var(--panel);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
  .f{display:flex;flex-direction:column;gap:3px}
  .f>label{font-size:12px;color:var(--muted)}
  .row{display:flex;gap:6px;align-items:center}
  input[type=text],input[type=date],input[type=time],input[type=password],select{height:30px;border:1px solid var(--line);border-radius:6px;padding:0 8px;font:inherit;background:#fff;color:var(--ink)}
  input[type=text]{width:120px}
  input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
  .chips{display:flex;gap:4px;flex-wrap:wrap}
  .chip{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;user-select:none;background:#fff;font-size:13px}
  .chip input{margin:0}
  .chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}
  .seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .seg label{padding:5px 10px;cursor:pointer;font-size:13px;border-right:1px solid var(--line);background:#fff}
  .seg label:last-child{border-right:0}
  .seg input{display:none}
  .seg label:has(input:checked){background:var(--accent);color:#fff}
  button{height:32px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 14px;font:inherit;cursor:pointer;color:var(--ink)}
  button:hover{border-color:var(--accent)}
  button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
  button.primary:hover{filter:brightness(1.08)}
  button:disabled{opacity:.45;cursor:not-allowed}
  .info{display:flex;gap:10px;align-items:stretch;padding:8px 16px;background:#fbfbf9;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 12px;min-width:92px}
  .stat b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
  .stat span{font-size:11px;color:var(--muted)}
  .legend{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-left:auto}
  .sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px;border:1px solid #0001}
  #g2wrap{max-height:84px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:260px}
  #g2 td,#g2 th{padding:2px 8px;font-size:12px;white-space:nowrap}
  #g2 th{background:#f1f2ee;position:sticky;top:0}
  main{flex:1;min-height:0;overflow:auto;background:#fff}
  table.grid{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
  .grid th{position:sticky;top:0;background:#eef0ea;z-index:1;text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;cursor:pointer}
  .grid th.searchcol{background:#dfe9e3;color:var(--accent)}
  .grid td{padding:4px 8px;border-bottom:1px solid #eceee8;border-right:1px solid #f1f2ee;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
  .grid tr:hover td{background:#f7f8f4}
  .grid tr.last td{background:var(--pink)}
  .grid tr.found td{background:var(--green)}
  .grid tr.sel td{background:var(--sel)!important}
  .grid td.hl{background:var(--hl)!important}
  .grid td.num{text-align:right;font-variant-numeric:tabular-nums}
  .grid td.ck{text-align:center}
  .ok{color:var(--accent);font-weight:700}
  .empty{padding:60px;text-align:center;color:var(--muted)}
  #busy{position:fixed;inset:0;background:#fff8;display:none;align-items:center;justify-content:center;z-index:9}
  #busy .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 26px;box-shadow:0 8px 30px #0002;display:flex;gap:12px;align-items:center}
  .spin{width:20px;height:20px;border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:s 1s linear infinite}
  @keyframes s{to{transform:rotate(360deg)}}
  #toast{position:fixed;right:16px;bottom:16px;max-width:420px;padding:10px 14px;border-radius:8px;color:#fff;display:none;z-index:10;box-shadow:0 6px 20px #0003}
  #login{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:20}
  #login .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px;width:280px}
  .note{font-size:12px;color:var(--warn)}
  .modal{position:fixed;inset:0;background:#0004;display:none;align-items:center;justify-content:center;z-index:15}
  .modal .box{background:#fff;border-radius:12px;padding:18px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 10px 40px #0003;display:flex;flex-direction:column;gap:10px}
  .modal h3{margin:0;font-size:16px}
  .modal .actions{display:flex;gap:8px;justify-content:flex-end}
  .btnbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .sep{width:1px;height:26px;background:var(--line);margin:0 4px}
  button.danger{background:#a8461f;border-color:#a8461f;color:#fff;font-weight:600}
  .grid td.ckc{text-align:center;cursor:pointer}
  .grid td.ckc input{pointer-events:none}