:root{
  --bg:#f4f6f8; --panel:#ffffff; --text:#1c2430; --muted:#6b7686;
  --border:#e2e6ec; --accent:#2b6cb0; --accent-soft:#e8f1fb;
  --danger:#c0392b; --danger-soft:#fbeceb; --good:#2f9e6b; --shadow:0 1px 3px rgba(20,30,50,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14181f; --panel:#1c2129; --text:#e7ebf2; --muted:#8b95a5;
    --border:#2b323d; --accent:#5b9bd9; --accent-soft:#22344a;
    --danger:#e0685c; --danger-soft:#3a2323; --good:#4cbf8c; --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
header{padding:20px 28px 8px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px;}
header h1{margin:0 0 4px; font-size:22px; font-weight:700;}
header .meta{color:var(--muted); font-size:12.5px;}
.crumbs{padding:14px 28px 0; font-size:12.5px;}
.crumbs a{color:var(--accent); text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
a.dashlink{font-size:12.5px; color:var(--accent); text-decoration:none;}
a.dashlink:hover{text-decoration:underline;}
main{padding:8px 28px 40px; max-width:1200px; margin:0 auto;}
main.narrow{max-width:960px;}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px;}
.panel h2{margin:0 0 12px; font-size:15px; font-weight:700;}
.toolbarrow{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
input[type=text], input[type=number], input[type=search], select{
  border:1px solid var(--border); border-radius:8px; padding:6px 9px; background:var(--bg); color:var(--text); font-size:13px;
}
label.chk{display:flex; align-items:center; gap:6px; font-size:13px;}
button{font-family:inherit;}
button.btn{
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:8px; padding:7px 14px; font-size:13px; cursor:pointer;
}
button.btn.secondary{background:var(--panel); color:var(--text); border-color:var(--border);}
button.btn.danger{background:var(--danger); border-color:var(--danger);}
button.btn:hover{opacity:.9;}
button.btn:disabled{opacity:.5; cursor:default;}
button.link{background:none; border:none; color:var(--accent); cursor:pointer; font-size:12.5px; padding:2px 4px;}
button.link.danger{color:var(--danger);}
table{width:100%; border-collapse:collapse; font-size:12.8px;}
th,td{padding:7px 8px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle;}
th{color:var(--muted); font-weight:600;}
tbody tr:hover{background:var(--accent-soft);}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px;}
.badge.on{background:var(--accent-soft); color:var(--accent);}
.badge.off{background:var(--danger-soft); color:var(--danger);}
.formcard{border:1px dashed var(--border); border-radius:10px; padding:14px; margin-top:10px; display:none;}
.formcard.open{display:block;}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:10px;}
.formgrid .field{display:flex; flex-direction:column; gap:4px;}
.formgrid .field label{font-size:11.5px; color:var(--muted);}
.comprow{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.comprow input{flex:1;}
.comprow input.qty{flex:0 0 90px;}
.subtle{color:var(--muted); font-size:11.5px;}
.banner{padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:13px;}
.banner.info{background:var(--accent-soft); color:var(--accent);}
.banner.warn{background:var(--danger-soft); color:var(--danger);}
.status-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
.status-row .stat{font-size:13px;}
.status-row .stat b{font-size:16px;}
.rule-col{white-space:nowrap;}
.searchbar{width:220px;}
.tablewrap{border-top:1px solid var(--border); margin-top:12px;}
.pager{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 2px;}
.pager .pagerinfo{font-size:12.5px; color:var(--muted);}
button.pagerbtn{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:8px; padding:5px 12px; font-size:12.5px; cursor:pointer;
}
button.pagerbtn:disabled{opacity:.4; cursor:default;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:14px 16px;}
.card .label{font-size:11.5px; color:var(--muted); margin-bottom:6px;}
.card .value{font-size:22px; font-weight:700;}
.navgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.navcard{
  display:block; background:var(--panel); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:18px; text-decoration:none; color:var(--text);
}
.navcard:hover{border-color:var(--accent);}
.navcard .navcount{font-size:26px; font-weight:700; color:var(--accent); margin:4px 0 6px;}
.navcard .navdesc{font-size:12.5px; color:var(--muted);}
.navcard h3{margin:0; font-size:15px;}