:root{
  --blue:#409eff; --blue-dark:#3a8ee6; --blue-light:#ecf5ff;
  --green:#67c23a; --orange:#e6a23c; --red:#f56c6c;
  --text:#303133; --text-2:#606266; --text-3:#909399; --text-4:#c0c4cc;
  --line:#e4e7ed; --line-2:#ebeef5; --bg:#f5f7fa; --side:#f8f9fb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
  color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ================= 顶部告警条 ================= */
.notice{
  height:32px;line-height:32px;background:#fdf6ec;color:#e6a23c;font-size:12px;
  padding:0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid #faecd8;
}
.notice b{color:#f56c6c}

/* ================= 布局 ================= */
.layout{display:flex;height:calc(100vh - 32px);min-height:560px}
.side{
  width:208px;flex:0 0 208px;background:var(--side);border-right:1px solid var(--line-2);
  display:flex;flex-direction:column;
}
.logo{
  height:56px;display:flex;align-items:center;gap:10px;padding:0 16px;
  border-bottom:1px solid var(--line-2);
}
.logo .cube{
  width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,#4b8df8,#2d6fe0);
  position:relative;flex:0 0 26px;
}
.logo .cube:after{
  content:"";position:absolute;left:6px;top:7px;width:14px;height:3px;border-radius:2px;
  background:#fff;box-shadow:0 6px 0 #fff,0 12px 0 #fff;
}
.logo b{font-size:15px;font-weight:600;letter-spacing:.5px}
.menu{padding:10px 0;flex:1;overflow:auto}
.menu a{
  display:block;height:44px;line-height:44px;padding:0 22px;color:var(--text-2);font-size:14px;
  border-left:3px solid transparent;
}
.menu a:hover{background:#eef2f8;color:var(--text)}
.menu a.on{background:var(--blue-light);color:var(--blue);border-left-color:var(--blue);font-weight:500}
.side-foot{padding:12px 18px;color:var(--text-4);font-size:12px;border-top:1px solid var(--line-2)}

.main{flex:1;display:flex;flex-direction:column;min-width:0;background:#fff}
.topbar{
  height:56px;flex:0 0 56px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;padding:0 20px;gap:14px;
}
.icon-btn{
  width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);font-size:15px;
}
.icon-btn:hover{color:var(--blue);border-color:#c6e2ff}
.spacer{flex:1}
.vip{color:var(--text-2);font-size:13px;display:flex;align-items:center;gap:6px}
.vip i{width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block}
.user{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.avatar{
  width:28px;height:28px;border-radius:50%;background:#d9ecff;color:#409eff;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;
}

.content{flex:1;overflow:auto;padding:18px 20px 28px}

/* ================= 工具条 ================= */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.btn{
  height:32px;padding:0 14px;border-radius:5px;border:1px solid var(--line);background:#fff;
  color:var(--text-2);font-size:13px;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{color:var(--blue);border-color:#c6e2ff;background:#ecf5ff}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.green:hover{background:#5caf34;border-color:#5caf34;color:#fff}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.orange:hover{background:#cf922f;border-color:#cf922f;color:#fff}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#e35d5d;border-color:#e35d5d;color:#fff}
.btn.round{width:32px;padding:0;border-radius:50%;justify-content:center}

/* ================= 提示条 ================= */
.tip{
  background:#ecf5ff;border:1px solid #d9ecff;color:#5e6d82;border-radius:4px;
  padding:10px 12px;font-size:12.5px;line-height:1.9;margin-bottom:12px;
}
.tip .hl{color:var(--blue)}

/* ================= 表格 ================= */
.table-wrap{border:0}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  color:var(--text-3);font-weight:500;text-align:left;padding:10px 10px;
  background:#fafafa;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
tbody td{
  padding:11px 10px;border-bottom:1px solid var(--line-2);color:var(--text-2);vertical-align:middle;
}
tbody tr:hover{background:#f7fbff}
td.num{font-variant-numeric:tabular-nums}
.acc{display:flex;align-items:center;gap:8px}
.acc .round-ico{
  width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8ff9,#2d6fe0);
  color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;
}
.acc .nm{line-height:1.25}
.acc .nm small{display:block;color:var(--text-3);font-size:11.5px}
.tag{
  display:inline-block;height:22px;line-height:20px;padding:0 8px;border-radius:3px;font-size:12px;
  border:1px solid;
}
.tag.on{color:var(--green);border-color:#c2e7b0;background:#f0f9eb}
.tag.off{color:var(--text-3);border-color:var(--line);background:#f4f4f5}
.tag.err{color:var(--red);border-color:#fbc4c4;background:#fef0f0}
.cnt{color:var(--blue);font-weight:600}
.cnt.all{color:var(--text-2);font-weight:400}
.switch{
  width:40px;height:20px;border-radius:10px;background:#dcdfe6;position:relative;transition:.2s;
  display:inline-block;cursor:pointer;vertical-align:middle;
}
.switch:after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch.on{background:var(--blue)}
.switch.on:after{left:22px}
.space{font-size:12.5px;line-height:1.5;color:var(--text-2);white-space:nowrap}
.space i{font-style:normal;color:var(--text-3)}
.bar{height:4px;border-radius:2px;background:#eef1f6;margin-top:4px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--blue)}
.ops{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
.op{
  height:28px;padding:0 9px;border-radius:4px;border:1px solid;background:#fff;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  white-space:nowrap;word-break:keep-all;flex:0 0 auto;
}
.op.update{background:var(--blue);border-color:var(--blue);color:#fff}
.op.clean{background:var(--orange);border-color:var(--orange);color:#fff}
.op.edit{border-color:var(--line);color:var(--text-2)}
.op.del{background:var(--red);border-color:var(--red);color:#fff}
.op:hover{filter:brightness(.96)}
.empty{text-align:center;color:var(--text-3);padding:48px 0}

/* 分页 */
.pager{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:14px 4px;color:var(--text-3);font-size:13px}
.pager .pg{
  min-width:28px;height:28px;padding:0 8px;border:1px solid var(--line);background:#fff;border-radius:4px;
  color:var(--text-2);font-size:13px;
}
.pager .pg.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .pg:disabled{color:var(--text-4);cursor:not-allowed}

/* ================= 弹窗 ================= */
.mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:50;
}
.mask.show{display:flex}
.modal{
  width:560px;max-width:94vw;max-height:88vh;overflow:auto;background:#fff;border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.modal h3{margin:0;padding:16px 20px;font-size:15px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between}
.modal h3 span{color:var(--text-3);cursor:pointer;font-weight:400}
.modal .body{padding:18px 20px}
.modal .foot{padding:12px 20px 18px;display:flex;justify-content:flex-end;gap:10px}
.field{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.field>label{width:132px;flex:0 0 132px;text-align:right;color:var(--text-2);font-size:13px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field .ctl{flex:1;min-width:0}
input[type=text],input[type=password],input[type=number],input[type=datetime-local],select,textarea{
  width:100%;height:32px;padding:0 10px;border:1px solid #dcdfe6;border-radius:4px;font-size:13px;
  color:var(--text);outline:none;font-family:inherit;background:#fff;
}
textarea{height:64px;padding:8px 10px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
.hint{color:var(--text-3);font-size:12px;margin-top:4px}

/* 登录 */
.login-wrap{position:fixed;inset:0;background:#eef3fb;display:flex;align-items:center;justify-content:center;z-index:80}
.login-card{width:360px;background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(20,40,80,.14);padding:28px 26px}
.login-card h2{margin:0 0 4px;font-size:18px}
.login-card p{margin:0 0 20px;color:var(--text-3);font-size:12.5px}
.login-card .btn{width:100%;height:38px;justify-content:center;margin-top:16px}
.login-card input{margin-bottom:12px;height:36px}

/* toast */
.toast{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);
  padding:10px 18px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.12);font-size:13px;z-index:99;
  opacity:0;transition:.25s;pointer-events:none;
}
.toast.show{opacity:1;top:26px}
.toast.ok{color:var(--green);border-color:#c2e7b0}
.toast.err{color:var(--red);border-color:#fbc4c4}

/* 单选组 / 单位 */
.rd{display:inline-flex;align-items:center;gap:6px;margin-right:22px;color:#606266;font-size:13px;cursor:pointer;line-height:32px}
.rd input{width:auto;height:auto;margin:0}
.unit{display:inline-block;margin-left:8px;color:#909399;font-size:13px}

/* 垂直字段（标签一行、控件在下） */
.field.vert{display:block;margin-bottom:18px}
.field.vert>label{width:auto;flex:none;text-align:left;display:block;line-height:1.7;margin-bottom:6px;white-space:normal;overflow:visible}
.field.vert .ctl{max-width:520px}
.field.vert .hint{margin-top:6px}