/* WG 管理系统 —— 状态一律整行着色（小圆点在他的屏幕上看不见） */

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 0 40px;
  font: 15px/1.7 "Microsoft YaHei", system-ui, sans-serif;
  color: #1f2328; background: #f6f8fa;
}
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 22px; background: #24364a; color: #fff;
}
header .brand { font-weight: 700; font-size: 17px; }
header nav { display: flex; flex-wrap: wrap; gap: 6px; }
header a { color: #d8e2ee; }
.tab {
  padding: 5px 12px; border-radius: 4px; text-decoration: none;
  background: #33485f; color: #d8e2ee;
}
.tab.on { background: #d8e2ee; color: #1f2328; font-weight: 700; }
.who { margin-left: auto; font-size: 14px; }
h1, h2, h3 { margin: 22px 22px 8px; }
h2 { font-size: 19px; border-left: 5px solid #2b6cb0; padding-left: 9px; }
h3 { font-size: 16px; margin-top: 26px; }
p { margin: 8px 22px; }
.tip { color: #5b6570; font-size: 13px; }
form { margin: 10px 22px; }
form.inline { display: inline-block; margin: 2px 4px 2px 0; }
/* 「转给」单独占一行：这一行的按钮已经够挤了，别再往同一行里塞下拉框 */
form.assign { display: block; margin: 6px 0 2px; }
form.assign select { max-width: 210px; }
form.bar { background: #fff; border: 1px solid #d0d7de; border-radius: 6px; padding: 12px 14px; }
label { display: inline-block; margin: 4px 14px 4px 0; }
label input, label select, textarea { display: block; margin-top: 3px; }
input, select, textarea, button {
  font: inherit; padding: 6px 9px; border: 1px solid #c3ccd5; border-radius: 4px; background: #fff;
}
input.pw { width: 130px; }
textarea { width: 100%; font-family: Consolas, monospace; font-size: 12px; }
button { cursor: pointer; background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
button.mini { padding: 3px 9px; font-size: 13px; background: #eef2f6; color: #1f2328; border-color: #b9c4cf; }
a.mini {
  display: inline-block; padding: 3px 9px; font-size: 13px; text-decoration: none;
  background: #eef2f6; color: #1f2328; border: 1px solid #b9c4cf; border-radius: 4px; margin-left: 6px;
}
button.danger { background: #9b2c2c; border-color: #9b2c2c; }
table { border-collapse: collapse; width: calc(100% - 44px); margin: 10px 22px; background: #fff; }
th, td { border: 1px solid #d0d7de; padding: 6px 9px; text-align: left; vertical-align: top; font-size: 14px; }
thead th { background: #eaeef2; }
table.kv { width: auto; }
table.kv th { background: #f4f6f8; width: 130px; }
.ops { white-space: nowrap; }

/* 状态底色：整行上色，颜色压得比较深，扫一眼就能分清 */
.row-on   { background: #cfe9cd; }
.row-wait { background: #ffe7ad; }
.row-idle { background: #eceef1; }
.row-off  { background: #f5cfcb; }
.row-on td:first-child   { border-left: 5px solid #1a7f37; }
.row-wait td:first-child { border-left: 5px solid #a06a00; }
.row-idle td:first-child { border-left: 5px solid #6b7480; }
.row-off td:first-child  { border-left: 5px solid #9b2c2c; }
/* 正在编辑的那一行：蓝底，和「在用/已停用」都不撞色 */
.row-edit { background: #dbe9fb; }
.row-edit td:first-child { border-left: 5px solid #2b6cb0; }

/* 编辑面板：整块蓝底加左边一条粗线，一眼看出这是改动区不是新增区 */
form.bar.editing { background: #f2f7fd; border-left: 5px solid #2b6cb0; }
form.bar.editing strong { display: block; margin-bottom: 6px; }

.pend {
  display: block; background: #fff3cd; border-left: 6px solid #a06a00;
  color: #5c3d00; padding: 9px 22px; margin: 0; font-weight: 700;
}
.flash { padding: 9px 14px; border-radius: 5px; margin: 12px 22px; }
.flash.ok  { background: #d6ecd3; border-left: 5px solid #1a7f37; }
.flash.err { background: #f7d9d6; border-left: 5px solid #9b2c2c; }
.flash.once { font-size: 16px; }
footer { margin: 26px 22px 0; color: #6a737d; font-size: 12px; }

/* 登录页与二维码页 */
body.plain { background: #eef1f4; padding-top: 40px; }
.box {
  width: 340px; margin: 0 auto; background: #fff; border: 1px solid #c3ccd5;
  border-radius: 8px; padding: 22px 26px;
}
.box.wide { width: 620px; }
.box h1 { margin: 0 0 6px; font-size: 21px; }
.box form { margin: 14px 0; }
.box label { display: block; margin-bottom: 10px; }
.box input { width: 100%; }
.box button { width: 100%; }
.qr { text-align: center; margin: 14px 0; }
.qr img, .qr svg { image-rendering: pixelated; }