:root { color-scheme: light; --ink:#17202a; --muted:#637083; --line:#d8dee8; --bg:#f5f7fb; --panel:#ffffff; --brand:#176f6b; --warn:#b8531d; --bad:#a53030; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Microsoft JhengHei", "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:3; }
h1 { font-size:20px; margin:0; letter-spacing:0; }
main { padding:20px 24px 36px; }
.toolbar, .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.toolbar { padding:14px; display:grid; grid-template-columns: 1.4fr repeat(4, minmax(120px, 1fr)) auto; gap:10px; align-items:end; margin-bottom:14px; }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
input, select, textarea { width:100%; border:1px solid #c6cfda; border-radius:6px; padding:9px 10px; font:inherit; background:#fff; }
button { border:1px solid transparent; border-radius:6px; padding:9px 12px; font:inherit; cursor:pointer; background:#eef2f6; color:var(--ink); white-space:nowrap; }
button.primary { background:var(--brand); color:#fff; }
button.danger { color:#fff; background:var(--bad); }
button.warn { color:#fff; background:var(--warn); }
button:disabled { opacity:.45; cursor:not-allowed; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.identity { display:flex; gap:8px; align-items:center; }
.identity span { white-space:nowrap; }
.panel { overflow:hidden; }
.table-wrap { overflow:auto; max-height:62vh; }
table { width:100%; border-collapse:collapse; min-width:1500px; background:#fff; }
th, td { border-bottom:1px solid #edf0f4; padding:9px 10px; text-align:left; font-size:13px; vertical-align:top; }
th { position:sticky; top:0; background:#f0f4f8; z-index:1; color:#354052; }
tr:hover td { background:#f8fbfd; }
.status { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; font-size:12px; background:#e4f4ef; color:#176f4d; }
.status.off { background:#f7e8e4; color:#984124; }
dialog { border:0; border-radius:8px; padding:0; width:min(1080px, 94vw); max-height:90vh; box-shadow:0 20px 60px rgba(22, 34, 51, .24); }
dialog::backdrop { background:rgba(10, 18, 28, .45); }
.modal-head { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.modal-body { padding:16px 18px; overflow:auto; max-height:68vh; }
.modal-foot { padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; }
.form-grid { display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:12px; }
.span-2 { grid-column:span 2; }
.span-4 { grid-column:span 4; }
.notice { margin:0 0 12px; padding:10px 12px; border:1px solid #f0d7a2; background:#fff8e8; border-radius:6px; color:#6f4a13; }
.summary { padding:10px 14px; color:var(--muted); display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.audit { font-size:13px; white-space:pre-wrap; max-height:360px; overflow:auto; background:#fbfcfe; padding:12px; border:1px solid var(--line); border-radius:6px; }
.login-panel { width:min(420px, 100%); margin:48px auto 0; padding:20px; }
.login-panel form { display:grid; gap:14px; }
@media (max-width: 900px) {
  header { height:auto; align-items:flex-start; gap:12px; flex-direction:column; padding:14px; }
  main { padding:14px; }
  .toolbar { grid-template-columns:1fr; }
  .identity { width:100%; flex-wrap:wrap; }
  .form-grid { grid-template-columns:1fr; }
  .span-2, .span-4 { grid-column:span 1; }
}