* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:#f0f2f5; color:#333; }
:root {
  --primary: #1677ff; --primary-light: #e6f4ff; --success: #52c41a; --warning: #faad14;
  --danger: #ff4d4f; --bg: #f0f2f5; --card-bg: #fff; --border: #e8e8e8; --text: #333;
  --text-secondary: #888; --sidebar-bg: #001529; --sidebar-text: #ffffffa6;
  --sidebar-active: #1677ff; --header-h: 56px; --sidebar-w: 220px;
}

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #1677ff 0%, #001529 100%); }
.login-card { background:#fff; border-radius:12px; padding:48px 40px; width:400px; box-shadow:0 8px 40px rgba(0,0,0,.15); }
.login-card h1 { text-align:center; font-size:24px; margin-bottom:8px; color:#1677ff; }
.login-card .sub { text-align:center; color:#999; font-size:13px; margin-bottom:32px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:#555; }
.form-group input, .form-group select, .form-group textarea { width:100%; height:40px; border:1px solid #d9d9d9; border-radius:6px; padding:0 12px; font-size:14px; transition:border .2s; outline:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.1); }
.form-group textarea { height:80px; padding:8px 12px; resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 24px; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:500; transition:all .2s; }
.btn-primary { background:#1677ff; color:#fff; }
.btn-primary:hover { background:#4096ff; }
.login-card .btn-primary { width:100%; }
.modal-footer .btn { width:auto; min-width:88px; }
.modal-footer .btn-primary { width:auto; }
.btn-success { background:#52c41a; color:#fff; }
.btn-success:hover { background:#73d13d; }
.btn-danger { background:#ff4d4f; color:#fff; }
.btn-danger:hover { background:#ff7875; }
.btn-outline { background:#fff; color:#1677ff; border:1px solid #1677ff; }
.btn-outline:hover { background:#e6f4ff; }
.btn-sm { height:30px; padding:0 12px; font-size:12px; }
.btn-xs { height:24px; padding:0 8px; font-size:11px; }
.login-error { color:#ff4d4f; font-size:13px; text-align:center; margin-top:8px; display:none; }

/* Layout */
.layout { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); background:var(--sidebar-bg); position:fixed; top:0; left:0; bottom:0; z-index:100; overflow-y:auto; }
.sidebar .logo { height:56px; display:flex; align-items:center; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .logo span { color:#fff; font-size:16px; font-weight:600; white-space:nowrap; }
.sidebar .user-info { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .user-info .name { color:#fff; font-size:14px; font-weight:500; }
.sidebar .user-info .role { color:var(--sidebar-text); font-size:12px; margin-top:2px; }
.nav-item { display:flex; align-items:center; padding:12px 20px; color:var(--sidebar-text); cursor:pointer; font-size:14px; transition:all .2s; border-left:3px solid transparent; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,.05); }
.nav-item.active { color:#fff; background:var(--sidebar-active); border-left-color:#fff; }
.nav-item .icon { width:20px; margin-right:10px; text-align:center; font-size:16px; }
.main { margin-left:var(--sidebar-w); flex:1; }
.header { height:var(--header-h); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.header h2 { font-size:18px; font-weight:600; }
.header .actions { display:flex; gap:8px; }
.content { padding:24px; }
.content--home { padding:0; }
.h5-home-frame {
  width:100%; height:calc(100vh - var(--header-h));
  border:none; display:block; background:#f4f7f5;
}

/* Cards */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--card-bg); border-radius:8px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.stat-card .label { font-size:13px; color:var(--text-secondary); margin-bottom:8px; }
.stat-card .value { font-size:28px; font-weight:700; }
.stat-card .value.blue { color:#1677ff; }
.stat-card .value.green { color:#52c41a; }
.stat-card .value.orange { color:#fa8c16; }
.stat-card .value.red { color:#ff4d4f; }

.panel { background:var(--card-bg); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:16px; }
.panel-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-header h3 { font-size:15px; font-weight:600; margin:0; flex-shrink:0; }
.panel-header > .btn,
.panel-header .btn { width:auto !important; flex-shrink:0; white-space:nowrap; }
.panel-header__title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.panel-header__title h3 { font-size:15px; font-weight:600; margin:0; }
.panel-header__sub { font-size:12px; color:#8c8c8c; line-height:1.4; font-weight:400; }
.panel-body { padding:20px; }

/* Table */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
table th, table td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
table th { background:#fafafa; font-weight:600; color:#555; white-space:nowrap; }
table tr:hover td { background:#fafafa; }
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500; white-space:nowrap; line-height:1.4; vertical-align:middle; }
.tag-green { background:#f6ffed; color:#52c41a; border:1px solid #b7eb8f; }
.tag-red { background:#fff2f0; color:#ff4d4f; border:1px solid #ffccc7; }
.tag-blue { background:#e6f4ff; color:#1677ff; border:1px solid #91caff; }
.tag-orange { background:#fff7e6; color:#fa8c16; border:1px solid #ffd591; }
.tag-gray { background:#f5f5f5; color:#8c8c8c; border:1px solid #d9d9d9; }
.tag-purple { background:#f9f0ff; color:#722ed1; border:1px solid #d3adf7; }

body.role-demo .demo-hide { display: none !important; }
.demo-readonly-banner {
  margin-right: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #722ed1;
  background: #f9f0ff;
  border: 1px solid #d3adf7;
  white-space: nowrap;
}

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:12px; width:90%; max-width:560px; max-height:85vh; overflow-y:auto; box-shadow:0 12px 48px rgba(0,0,0,.15); }
.modal-lg { max-width:800px; }
.modal-lg.modal--rule { max-width:900px; }
.modal.modal--pts { max-width:1040px; width:96%; }
.modal-body--pts { padding:16px 16px 14px; overflow-x:hidden; }
.modal-body--rule { padding:16px 20px 12px; background:linear-gradient(180deg, #fafbfc 0%, #fff 48px); }

.modal-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-header h3 { font-size:15px; font-weight:600; letter-spacing:0.01em; }
.modal-header--rule {
  background:linear-gradient(90deg, #f7fbff 0%, #fff 60%);
}
.modal-header--rule .modal-header__meta {
  margin:2px 0 0; font-size:11px; color:#8c8c8c; font-weight:400; line-height:1.4;
}
.modal-close { width:32px; height:32px; border:none; background:none; cursor:pointer; font-size:18px; color:#999; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-close:hover { background:#f5f5f5; color:#333; }
.modal-body { padding:24px; }
.modal-footer { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; background:#fafafa; border-radius:0 0 12px 12px; }

/* 规则表单（报警 / 控制共用） */
.rf { display:flex; flex-direction:column; gap:12px; }
.rf__name {
  display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center;
  padding:10px 12px; border:1px solid #eef0f3; border-radius:10px; background:#fff;
}
.rf__name label { margin:0; font-size:12px; font-weight:600; color:#595959; }
.rf__name input {
  height:34px; border:1px solid #d9d9d9; border-radius:8px; padding:0 10px; font-size:13px; outline:none;
}
.rf__name input:focus { border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.08); }
.rf__split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px) { .rf__split { grid-template-columns:1fr; } }
.rf__pane {
  position:relative; border:1px solid #e8e8e8; border-radius:12px; padding:12px 12px 10px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.rf__pane::before {
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0;
}
.rf__pane--watch { border-color:#c6e0ff; background:linear-gradient(180deg, #f3f8ff 0%, #fff 42%); }
.rf__pane--watch::before { background:#1677ff; }
.rf__pane--action { border-color:#c6e8b5; background:linear-gradient(180deg, #f4fbef 0%, #fff 42%); }
.rf__pane--action::before { background:#52c41a; }
.rf__pane--notify { border-color:#ffd8a8; background:linear-gradient(180deg, #fff8f0 0%, #fff 42%); }
.rf__pane--notify::before { background:#fa8c16; }
.rf__pane-title {
  display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:12px; font-weight:700;
  color:#262626; letter-spacing:0.02em;
}
.rf__pane-title .rf__badge {
  display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:999px;
  font-size:10px; font-weight:600; letter-spacing:0.04em;
}
.rf__pane--watch .rf__badge { background:#e6f4ff; color:#1677ff; }
.rf__pane--action .rf__badge { background:#f6ffed; color:#389e0d; }
.rf__pane--notify .rf__badge { background:#fff7e6; color:#d46b08; }
.rf__field { margin-bottom:8px; }
.rf__field:last-child { margin-bottom:0; }
.rf__field label {
  display:block; margin:0 0 4px; font-size:11px; font-weight:600; color:#8c8c8c;
}
.rf__field input,
.rf__field select {
  width:100%; height:32px; border:1px solid #d9d9d9; border-radius:8px;
  padding:0 8px; font-size:13px; background:#fff; outline:none; transition:border .15s, box-shadow .15s;
}
.rf__field input:disabled,
.rf__field select:disabled { background:#f5f5f5; color:#8c8c8c; cursor:not-allowed; }
.rf__field input:focus,
.rf__field select:focus { border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.08); }
.rf__inline { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rf__timing {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  padding:10px 12px; border:1px dashed #d9d9d9; border-radius:10px; background:#fafafa;
}
@media (max-width:720px) { .rf__timing { grid-template-columns:1fr 1fr; } }
.rf__hint {
  margin:0; padding:8px 10px; font-size:11px; color:#8c8c8c; line-height:1.5;
  background:#f7f8fa; border-radius:8px; border:1px solid #f0f0f0;
}
.rf__hint strong { color:#595959; font-weight:600; }

/* 规则页工具栏按钮 */
.panel-header .btn-add-rule {
  height:30px; padding:0 14px; border-radius:8px; font-size:12px; font-weight:600;
  width:auto !important; min-width:0; box-shadow:0 1px 2px rgba(22,119,255,.18);
}

/* 控制规则卡片列表 */
.cr-list { display:flex; flex-direction:column; gap:10px; }
.cr-card {
  display:flex; border:1px solid #e8eef5; border-radius:12px; background:#fff;
  box-shadow:0 1px 2px rgba(15,35,70,.04); overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.cr-card:hover { border-color:#cdddf3; box-shadow:0 4px 14px rgba(22,119,255,.07); }
.cr-card__bar { width:4px; flex-shrink:0; background:#d9d9d9; }
.cr-card--on .cr-card__bar { background:linear-gradient(180deg,#52c41a,#95de64); }
.cr-card--off .cr-card__bar { background:#d9d9d9; }
.cr-card--off { background:#fcfcfd; }
.cr-card__body { flex:1; min-width:0; padding:10px 12px 10px; }
.cr-card__head {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.cr-card__title { display:flex; align-items:center; gap:8px; min-width:0; }
.cr-card__title h4 {
  margin:0; font-size:14px; font-weight:650; color:#1f1f1f;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(360px, 52vw);
}
.cr-card__flow {
  display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); gap:8px; align-items:center;
}
@media (max-width:860px) {
  .cr-card__flow { grid-template-columns:1fr; gap:6px; }
  .cr-card__mid { flex-direction:row; height:auto; padding:2px 0; }
  .cr-card__line { width:18px; height:1px; }
}
.cr-card__pane {
  border-radius:10px; padding:8px 10px; border:1px solid transparent; min-width:0;
}
.cr-card__pane--watch { background:#f5f9ff; border-color:#e6f0ff; }
.cr-card__pane--action { background:#f6fbf3; border-color:#e9f5df; }
.cr-card__pane-label {
  font-size:10px; font-weight:700; letter-spacing:.04em; margin:0 0 4px;
}
.cr-card__pane--watch .cr-card__pane-label { color:#1677ff; }
.cr-card__pane--action .cr-card__pane-label { color:#389e0d; }
.cr-card__mid {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:100%;
}
.cr-card__line { width:1px; height:10px; background:#ffe7ba; }
.cr-card__cond {
  display:inline-flex; align-items:center; gap:3px;
  min-width:52px; padding:6px 8px; border-radius:999px; justify-content:center;
  font-size:12px; color:#8c5a00; background:#fff7e6; border:1px solid #ffe7ba;
  line-height:1; white-space:nowrap;
}
.cr-card__cond-sym { font-weight:700; color:#d48806; }
.cr-card__cond b { color:#ad6800; font-weight:700; font-variant-numeric:tabular-nums; }
.cr-path { min-width:0; }
.cr-path__trail {
  display:flex; align-items:center; gap:4px; min-width:0; font-size:11px; color:#8c8c8c;
}
.cr-path__seg {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cr-path__seg--proj { max-width:55%; }
.cr-path__seg--dev { max-width:45%; color:#595959; }
.cr-path__sep { flex-shrink:0; color:#bfbfbf; }
.cr-path__pt {
  margin-top:3px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0;
}
.cr-path__pt-name {
  font-size:13px; font-weight:650; color:#262626;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.cr-path__val {
  display:inline-flex; align-items:center; height:20px; padding:0 7px;
  border-radius:999px; font-size:11px; font-weight:700;
  color:#389e0d; background:#fff; border:1px solid #b7eb8f; white-space:nowrap;
}
.cr-card__meta {
  display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:8px; padding-top:8px;
  border-top:1px dashed #eef0f3; font-size:11px; color:#595959;
}
.cr-card__meta i {
  font-style:normal; color:#8c8c8c; margin-right:4px;
}
.cr-card__meta-last { margin-left:auto; color:#8c8c8c; }
.cr-ops { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.cr-ops .btn { width:auto !important; }

/* Toast */
.toast { position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:2000; padding:10px 24px; border-radius:6px; font-size:13px; color:#fff; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.show { opacity:1; }
.toast-success { background:#52c41a; }
.toast-error { background:#ff4d4f; }

/* Data monitor */
.monitor-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.monitor-page-stats {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 2px; margin-bottom:10px;
  padding:0; background:transparent; border:none;
}
.monitor-page-stat {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  background:#f7f9fc; border:1px solid #eef2f8; border-radius:999px;
  font-size:11px; color:#8c8c8c; line-height:1.4;
}
.monitor-page-stat + .monitor-page-stat { margin-left:2px; }
.monitor-page-stat strong { font-size:12px; font-weight:600; color:#1677ff; font-variant-numeric:tabular-nums; }
.monitor-page-stat strong.green { color:#52c41a; }
.monitor-page-stat strong.muted { font-size:11px; font-weight:500; color:#888; }
.monitor-card { background:var(--card-bg); border-radius:8px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.monitor-card .device-name { font-size:14px; font-weight:600; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); color:#1677ff; }
.monitor-card .point-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; }
.monitor-card .point-name { color:#555; }
.monitor-card .point-value { font-weight:600; font-size:15px; }
.monitor-card .point-value.high { color:#ff4d4f; }
.monitor-card .point-value.low { color:#1677ff; }
.monitor-card .point-unit { font-size:11px; color:#999; font-weight:400; }
.monitor-card.offline { opacity:0.55; }
.monitor-card.offline .device-name { color:#8c8c8c; }

/* 项目卡片 */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.project-card {
  background:var(--card-bg); border:1px solid #eef2f8; border-radius:8px;
  padding:12px 14px; cursor:pointer; transition:box-shadow .2s, border-color .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.03); position:relative;
}
.project-card:hover { border-color:#bae0ff; box-shadow:0 2px 10px rgba(22,119,255,.08); }
.project-card--monitor {
  padding:10px 12px 12px; border-radius:8px; background:#fff;
}
.project-card--monitor:hover { border-color:#91caff; }
.project-card__head { display:flex; align-items:flex-start; gap:8px; margin-bottom:0; }
.project-card--monitor .project-card__head { margin-bottom:8px; }
.project-card__live-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:6px;
}
.project-card__live-dot.on { background:#52c41a; box-shadow:0 0 0 2px rgba(82,196,26,.18); }
.project-card__live-dot.off { background:#d9d9d9; }
.project-card__icon { font-size:22px; line-height:1; flex-shrink:0; }
.project-card__title-wrap { flex:1; min-width:0; }
.project-card__title { font-size:14px; font-weight:600; color:#1f1f1f; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-card--monitor .project-card__title { font-size:13px; font-weight:600; color:#262626; }
.project-card__status { flex-shrink:0; }
.project-card__meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-top:3px;
  font-size:11px; color:#8c8c8c; line-height:1.3;
}
.project-card__meta-item { display:inline; white-space:nowrap; }
.project-card__meta-item + .project-card__meta-item::before {
  content:'·'; margin:0 5px; color:#d0d0d0;
}
.project-card__meta .label { color:#bbb; margin-right:4px; }
.project-card__meta code {
  background:transparent; padding:0; border-radius:0; font-size:11px; color:#8c8c8c;
}
.project-card__metrics-wrap { display:flex; flex-direction:column; gap:6px; }
.project-card__metrics-block {
  border:1px solid #eef2f8; border-radius:6px; background:#f8fafc; overflow:hidden;
}
.project-card__metrics-block-label {
  font-size:10px; font-weight:600; color:#8c8c8c; letter-spacing:.02em;
  padding:3px 8px 0; line-height:1.4;
}
.project-card__metrics {
  display:grid; gap:0; padding:0; margin:0; border:none; background:transparent;
}
.project-card__metrics--3 { grid-template-columns:repeat(3, 1fr); }
.project-card__metrics--2 { grid-template-columns:repeat(2, 1fr); }
.project-card__metric {
  display:flex; flex-direction:column; gap:1px; min-width:0;
  padding:4px 8px 6px; border:none; border-radius:0; background:transparent;
  border-right:1px solid #eef2f8;
}
.project-card__metric:last-child { border-right:none; }
.project-card__metric .label {
  font-size:10px; color:#999; line-height:1.2;
  white-space:nowrap;
}
.project-card__metric .value {
  font-size:13px; font-weight:600; color:#1677ff; font-variant-numeric:tabular-nums;
  line-height:1.25; white-space:nowrap;
}
.project-card__metric .value small { font-size:10px; font-weight:500; color:#999; margin-left:1px; }
.project-card__metric .value.muted { color:#ccc; font-weight:500; font-size:12px; }
.project-card__metric--usage .value { color:#13c2c2; }
.project-card__metric--energy .value { color:#fa8c16; }
.project-card__metric--level .project-card__metric-body {
  display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:22px;
}
.project-card__metric--level .value { flex:1; min-width:0; font-size:12px; }
.water-level-vbar { flex-shrink:0; display:flex; align-items:flex-end; }
.water-level-vbar__track {
  width:8px; height:22px; background:#eef2f8;
  border:1px solid #dce6f5; border-radius:3px; position:relative; overflow:hidden;
}
.water-level-vbar__fill {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, #69b1ff 0%, #1677ff 100%);
  border-radius:0 0 2px 2px; transition:height .3s ease; min-height:0;
}
.water-level-vbar__fill::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.4);
}
.water-level-vbar--low .water-level-vbar__fill { background:linear-gradient(180deg, #ffc069 0%, #fa8c16 100%); }
.water-level-vbar--warn .water-level-vbar__fill { background:linear-gradient(180deg, #ffa39e 0%, #ff4d4f 100%); }
.water-level-vbar--empty .water-level-vbar__fill { background:#e8e8e8; height:0 !important; }
.project-card__foot { display:none; }
.project-card__status .tag { padding:1px 6px; font-size:10px; }
.project-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.project-toolbar input[type="search"] {
  flex:1; min-width:220px; height:38px; border:1px solid var(--border); border-radius:8px;
  padding:0 14px; font-size:14px;
}
.project-toolbar input[type="search"]:focus { outline:none; border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.12); }
.project-toolbar__count { font-size:13px; color:var(--text-secondary); white-space:nowrap; }
.point-picker {
  border:1px solid var(--border); border-radius:10px; background:#fff; min-width:320px;
}
.point-selector__toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border); background:#fafafa;
  border-radius:10px 10px 0 0;
}
.point-selector__toolbar input[type="search"] {
  flex:1; min-width:160px; height:34px; border:1px solid var(--border); border-radius:8px; padding:0 10px; font-size:13px;
}
.point-selector__toolbar input[type="search"]:focus { outline:none; border-color:#1677ff; }
.point-selector__count { font-size:12px; color:#666; white-space:nowrap; }
.point-selector__tags {
  display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; min-height:36px;
  border-bottom:1px solid #f0f0f0; background:#fcfcfc;
}
.point-selector__tags:empty::before { content:'未选择点位时将查询全部'; color:#bbb; font-size:12px; }
.point-tag {
  display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px;
  background:#e6f4ff; color:#1677ff; font-size:12px; border:1px solid #91caff;
}
.point-tag button { border:none; background:none; color:#1677ff; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; }
.point-selector__list { max-height:360px; overflow-y:auto; padding:8px; }
.point-group { border:1px solid #eef2f7; border-radius:8px; margin-bottom:8px; overflow:hidden; }
.point-group summary {
  list-style:none; cursor:pointer; padding:10px 12px; background:#f7faff;
  font-size:13px; font-weight:600; color:#1677ff; display:flex; align-items:center; justify-content:space-between;
}
.point-group summary::-webkit-details-marker { display:none; }
.point-group summary::after { content:'▼'; font-size:10px; color:#999; }
.point-group[open] summary::after { content:'▲'; }
.point-group__grid { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; background:#fff; }
.point-chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  border:1px solid #d9d9d9; background:#fff; font-size:12px; cursor:pointer; transition:all .15s; user-select:none;
}
.point-chip:hover { border-color:#1677ff; color:#1677ff; }
.point-chip.selected { background:#1677ff; border-color:#1677ff; color:#fff; }
.point-chip__unit { opacity:.75; font-size:11px; }
.point-chip.hidden { display:none; }
.point-group.hidden { display:none; }
.point-selector__empty { padding:24px; text-align:center; color:#999; font-size:13px; }

/* ── 历史数据页 ── */
.hist-page { display:flex; flex-direction:column; gap:16px; }
.hist-filter-grid {
  display:grid; grid-template-columns:minmax(300px, 340px) 1fr; gap:16px; align-items:start;
}
@media (max-width:960px) { .hist-filter-grid { grid-template-columns:1fr; } }
.hist-datetime-block { margin-bottom:12px; }
.hist-datetime-block:last-of-type { margin-bottom:0; }
.hist-datetime-label { font-size:12px; color:#888; margin-bottom:6px; font-weight:500; }
.hist-datetime-fields {
  display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr; gap:8px; align-items:center;
}
.hist-datetime-fields input[type="date"],
.hist-datetime-fields select {
  width:100%; height:36px; border:1px solid var(--border); border-radius:8px;
  padding:0 10px; font-size:13px; background:#fff;
}
.hist-datetime-fields input:focus, .hist-datetime-fields select:focus {
  outline:none; border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.12);
}
.hist-range-summary {
  margin-top:10px; padding:8px 12px; background:#f6ffed; border:1px solid #b7eb8f;
  border-radius:8px; font-size:12px; color:#389e0d; line-height:1.5;
}
.hist-card {
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden;
}
.hist-card__head {
  padding:14px 18px; border-bottom:1px solid #f0f0f0;
  background:linear-gradient(90deg, #f7faff 0%, #fff 100%);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.hist-card__head h4 { margin:0; font-size:14px; font-weight:600; color:#1677ff; }
.hist-card__body { padding:16px 18px; }
.hist-field { margin-bottom:14px; }
.hist-field:last-child { margin-bottom:0; }
.hist-field label { display:block; font-size:12px; color:#666; margin-bottom:6px; font-weight:500; }
.hist-field select, .hist-field input[type="datetime-local"] {
  width:100%; height:38px; border:1px solid var(--border); border-radius:8px;
  padding:0 12px; font-size:13px; background:#fff;
}
.hist-field select:focus, .hist-field input:focus {
  outline:none; border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.12);
}
.hist-time-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hist-presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.hist-preset-btn {
  padding:4px 10px; font-size:12px; border:1px solid #d9d9d9; border-radius:999px;
  background:#fff; color:#555; cursor:pointer; transition:all .15s;
}
.hist-preset-btn:hover, .hist-preset-btn.active { border-color:#1677ff; color:#1677ff; background:#e6f4ff; }
.hist-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid #f0f0f0; }
.hist-actions .btn { flex:1; min-width:120px; justify-content:center; }
.hist-point-card .point-picker { border:none; border-radius:0; min-width:0; }
.hist-point-card .point-selector__list { max-height:280px; }
.hist-point-quick { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; border-bottom:1px solid #f0f0f0; background:#fcfcfc; }
.hist-result-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:8px 12px; background:#f7faff; border-bottom:1px solid #eef2f8; font-size:12px; color:#666;
}
.hist-result-bar__chip {
  display:inline-flex; align-items:center; gap:4px; padding:3px 8px;
  background:#fff; border:1px solid #e8eef6; border-radius:6px; font-size:11px; color:#666;
}
.hist-result-bar__chip strong { color:#1f1f1f; font-weight:600; }
.hist-result-bar .tag { margin:0; padding:2px 6px; font-size:10px; }
.hist-results-body { display:flex; flex-direction:column; }
.hist-energy-panel {
  padding:8px 12px; background:#fffdf5; border-bottom:1px solid #fff1b8;
}
.hist-energy-panel__title {
  font-size:11px; font-weight:600; color:#d48806; margin-bottom:6px;
  display:flex; align-items:center; gap:6px; letter-spacing:.02em;
}
.hist-energy-panel__title span { font-weight:400; color:#bbb; font-size:10px; }
.hist-energy-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.hist-energy-item {
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center;
  background:#fff; border:1px solid #ffe58f; border-radius:8px; padding:8px 10px;
}
.hist-energy-item__head { grid-column:1 / -1; font-size:11px; color:#888; line-height:1.3; margin:0; }
.hist-energy-item__head strong { display:inline; font-size:11px; color:#434343; font-weight:600; margin-right:6px; }
.hist-energy-item__delta {
  font-size:20px; font-weight:700; color:#d48806; font-variant-numeric:tabular-nums;
  line-height:1; margin:0; white-space:nowrap;
}
.hist-energy-item__delta small { font-size:11px; font-weight:500; color:#999; margin-left:2px; }
.hist-energy-item__detail { font-size:10px; color:#888; line-height:1.45; margin:0; }
.hist-energy-item__detail span { color:#aaa; }
.hist-energy-total {
  margin-top:6px; padding-top:6px; border-top:1px dashed #ffe58f;
  font-size:12px; color:#555; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.hist-energy-total strong { font-size:15px; color:#d48806; }
.hist-water-panel {
  padding:8px 12px; background:#f6fbff; border-bottom:1px solid #d6efff; margin-bottom:0;
}
.hist-water-panel__title { font-size:11px; font-weight:600; color:#096dd9; margin-bottom:6px; }
.hist-water-panel__title span { font-weight:400; color:#bbb; font-size:10px; }
.hist-water-panel .hist-energy-item { border-color:#91d5ff; }
.hist-water-panel .hist-energy-item__delta { color:#096dd9; }
.hist-water-panel .hist-energy-warn { background:#e6f7ff; color:#096dd9; }
.hist-period-summary-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-bottom:1px solid #eef2f8;
}
@media (max-width:720px) { .hist-period-summary-wrap { grid-template-columns:1fr; } }
.hist-period-summary-wrap .hist-energy-panel { border-bottom:none; border-right:1px solid #fff1b8; }
.hist-period-summary-wrap .hist-water-panel { border-bottom:none; }
@media (max-width:720px) {
  .hist-period-summary-wrap .hist-energy-panel { border-right:none; border-bottom:1px solid #fff1b8; }
}
.hist-quick-btn.active { border-color:#1677ff; color:#1677ff; background:#e6f4ff; }
.hist-table thead th.col-pivot-head { text-align:center; }
.hist-table .col-pivot { text-align:center; font-variant-numeric:tabular-nums; min-width:64px; }
.hist-table thead th small { font-weight:400; color:#999; font-size:10px; }
.hist-energy-warn { font-size:10px; color:#cf1322; margin-top:4px; grid-column:1 / -1; line-height:1.4; padding:4px 6px; background:#fff2f0; border-radius:4px; }
.hist-table-wrap { overflow:auto; max-height:calc(100vh - 280px); }
.hist-table { width:100%; border-collapse:collapse; font-size:12px; }
.hist-table thead th {
  position:sticky; top:0; z-index:1;
  background:#f5f8ff; color:#1677ff; font-weight:600; text-align:left;
  padding:7px 10px; border-bottom:1px solid #d6e4ff; white-space:nowrap; font-size:11px;
}
.hist-table tbody td { padding:6px 10px; border-bottom:1px solid #f5f5f5; vertical-align:middle; }
.hist-table tbody tr:hover { background:#fafcff; }
.hist-table tbody tr:nth-child(even) { background:#fcfcfc; }
.hist-table tbody tr:nth-child(even):hover { background:#f5f9ff; }
.hist-table .col-time { color:#666; font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hist-table .col-device { color:#888; font-size:11px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-table .col-name { font-weight:500; color:#333; font-size:11px; }
.hist-table .col-value { font-weight:600; color:#1677ff; font-variant-numeric:tabular-nums; text-align:center; font-size:12px; }
.hist-table thead th.col-value-head { text-align:center; }
.hist-table thead th.col-time-head { text-align:left; }
.hist-table .col-unit { color:#999; font-size:10px; }
.hist-empty {
  padding:32px 16px; text-align:center; color:#999;
}
.hist-empty__icon { font-size:32px; margin-bottom:8px; opacity:.6; }
.hist-empty p { margin:0; font-size:13px; }
.hist-card--results .hist-card__head { padding:10px 14px; }
.hist-card--results .hist-card__head h4 { font-size:13px; }
.hist-card--results .hist-card__head span { font-size:11px !important; }
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; color:var(--text-secondary); }
.breadcrumb a { color:#1677ff; cursor:pointer; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.project-detail-head {
  background:#fafbfd; border:1px solid #eef2f8; border-radius:8px 8px 0 0;
  padding:10px 12px; margin-bottom:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
}
.project-detail-head__main { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.project-detail-head__main .project-card__live-dot { margin-top:7px; }
.project-detail-head h3 { font-size:15px; margin:0; color:#262626; font-weight:600; line-height:1.3; }
.project-detail-head .meta-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-top:3px;
  font-size:12px; color:#8c8c8c;
}
.project-detail-head .meta-row > span + span::before {
  content:'·'; margin:0 6px; color:#d0d0d0;
}
.project-detail-panel {
  border:1px solid #eef2f8; border-radius:8px; margin-bottom:10px; overflow:hidden; background:#fff;
}
.project-detail-panel .project-detail-head {
  border:none; border-radius:0; border-bottom:1px solid #f0f0f0;
}
.project-detail-panel .poll-settings-bar {
  margin:0; border:none; border-radius:0; border-top:none;
}
.project-detail > .project-detail-head {
  border-radius:8px; margin-bottom:8px;
}
.project-detail-actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-bottom:10px; padding:0 1px;
}
.project-detail-table { margin-top:0; }
.project-detail-table table th,
.project-detail-table table td { padding:8px 10px; font-size:13px; }
.invite-qr-box { text-align:center; padding:16px; background:#fafafa; border-radius:10px; margin:12px 0; }
.invite-qr-box img { width:200px; height:200px; border:1px solid #eee; border-radius:8px; }
.invite-token { font-family:monospace; font-size:12px; word-break:break-all; color:#555; margin:8px 0; }
.member-perm-select { height:30px; border:1px solid #d9d9d9; border-radius:6px; padding:0 8px; font-size:12px; }
.point-perm-row { display:flex; align-items:center; gap:8px; padding:8px 10px; margin:4px 0; background:#fafafa; border-radius:8px; }
.point-perm-row__name { flex:1; min-width:0; }
.point-perm-row__name small { display:block; color:#999; font-size:11px; }
.point-perm-mode { margin-bottom:12px; padding:10px 12px; background:#f0f7ff; border-radius:8px; font-size:13px; }
.poll-settings-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:8px 12px; margin-bottom:10px; border:1px solid #eef2f8; border-radius:8px;
  background:#fafbfd;
}
.poll-settings-bar__label { font-size:12px; font-weight:600; color:#595959; margin-right:2px; }
.poll-settings-bar select {
  height:28px; border:1px solid #d9d9d9; border-radius:6px; padding:0 8px; font-size:12px; background:#fff;
}
.poll-settings-bar select:disabled { background:#f5f5f5; color:#999; }
.poll-settings-bar__hint { font-size:11px; color:#999; margin-left:auto; }
.subdevice-block { border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:8px; background:#fff; box-shadow:none; }
.subdevice-block.offline { border-color:#ffd6d6; }
.subdevice-block__head {
  background:#fafbfd;
  padding:8px 10px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #f0f0f0; font-weight:600; font-size:13px;
}
.subdevice-block.offline .subdevice-block__head { background:#fffafa; }
.subdevice-block__title { display:flex; align-items:center; gap:8px; min-width:0; }
.subdevice-block__title .project-card__live-dot { margin-top:0; }
.subdevice-block__icon {
  width:30px; height:30px; border-radius:8px; background:#e6f4ff; color:#1677ff;
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.subdevice-block.offline .subdevice-block__icon { background:#fff1f0; color:#ff7875; }
.subdevice-block__name { font-size:13px; font-weight:600; color:#262626; }
.subdevice-block__meta { font-size:11px; color:#888; font-weight:400; margin-top:1px; }
.subdevice-block__foot {
  padding:5px 12px 8px; font-size:10px; color:#999; text-align:right;
  border-top:1px dashed #f0f0f0; background:#fcfcfc;
}
.subdevice-block__body { padding:8px 10px; }
.monitor-section { margin-bottom:8px; }
.monitor-section:last-child { margin-bottom:0; }
.monitor-section__title {
  font-size:11px; font-weight:600; color:#8c8c8c; margin-bottom:6px;
  display:flex; align-items:center; gap:6px; padding-bottom:0; border-bottom:none;
}
.monitor-section__icon { font-size:13px; }
.monitor-section__count {
  display:inline-flex; min-width:16px; height:16px; padding:0 5px; border-radius:999px;
  background:#f0f5ff; color:#1677ff; font-size:10px; align-items:center; justify-content:center;
}
.monitor-kpi-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px;
}
.monitor-kpi-card {
  position:relative; border:1px solid #eef2f8; border-radius:8px; padding:8px 8px 6px 10px;
  background:linear-gradient(180deg, #fff 0%, #fafcff 100%); min-height:72px;
  transition:box-shadow .15s, border-color .15s;
}
.monitor-kpi-card--clickable { cursor:pointer; }
.monitor-kpi-card--clickable:hover { border-color:#1677ff; box-shadow:0 4px 14px rgba(22,119,255,.12); }
.monitor-kpi-card--clickable:active { transform:scale(.99); }
.monitor-kpi-card:hover { border-color:#91caff; box-shadow:0 4px 12px rgba(22,119,255,.08); }
.monitor-kpi-card--stale { opacity:.78; border-style:dashed; background:#fafafa; }
.monitor-kpi-card__bar {
  position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:0 2px 2px 0;
  background:#1677ff;
}
.monitor-kpi-card__label {
  font-size:11px; color:#666; line-height:1.3; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.monitor-kpi-card__value {
  font-size:18px; font-weight:700; color:#1677ff; line-height:1.1; letter-spacing:-.3px;
}
.monitor-kpi-card__unit {
  font-size:10px; font-weight:500; color:#8c8c8c; margin-left:3px;
}
.monitor-kpi-card__foot {
  margin-top:4px; font-size:10px; color:#999; display:flex; align-items:center; justify-content:space-between; gap:4px;
}
.monitor-kpi-card__badge {
  display:inline-flex; padding:0 5px; border-radius:999px; font-size:9px;
  background:#f5f5f5; color:#888;
}
.monitor-write-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; }
.monitor-write-row {
  border:1px solid #ffe7ba; background:linear-gradient(180deg, #fffbe6 0%, #fff 100%);
  border-radius:8px; padding:8px 10px;
}
.monitor-write-row.is-sending { opacity:.72; pointer-events:none; }
.monitor-write-row__info { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; font-size:12px; font-weight:500; }
.monitor-write-row__cur { color:#999; font-size:12px; font-weight:400; }
.monitor-write-row__cur.is-pending { color:#fa8c16; }
.monitor-write-row__cur.is-ok { color:#52c41a; }
.monitor-write-row__ctrl { display:flex; align-items:center; gap:6px; }
.monitor-write-row__ctrl input[type="number"] {
  width:80px; height:28px; border:1px solid #d9d9d9; border-radius:6px;
  padding:0 8px; font-size:12px; text-align:center;
}
.monitor-write-row__ctrl input[type="number"]:focus { outline:none; border-color:#1677ff; box-shadow:0 0 0 2px rgba(22,119,255,.12); }
.monitor-switch {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  height:28px; padding:0 2px;
}
.monitor-switch input { position:absolute; opacity:0; width:0; height:0; }
.monitor-switch__track {
  position:relative; width:44px; height:24px; border-radius:999px; background:#d9d9d9;
  transition:background .2s ease; flex-shrink:0;
}
.monitor-switch__track::after {
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .2s ease;
}
.monitor-switch input:checked + .monitor-switch__track { background:#52c41a; }
.monitor-switch input:checked + .monitor-switch__track::after { transform:translateX(20px); }
.monitor-switch input:disabled + .monitor-switch__track { opacity:.55; cursor:not-allowed; }
.monitor-switch__text { font-size:12px; font-weight:600; color:#666; min-width:2em; }
.monitor-switch input:checked ~ .monitor-switch__text { color:#389e0d; }
.monitor-empty-hint { color:#999; font-size:11px; padding:6px 0; text-align:center; }
.monitor-section__warn { color:#fa8c16; font-weight:400; font-size:10px; margin-left:4px; }
.subdevice-block__head .tag { padding:0 5px; font-size:10px; }
.monitor-detail .project-detail-panel { margin-bottom:8px; }
.monitor-detail .project-detail-head { padding:8px 10px; }
.monitor-detail .project-detail-head h3 { font-size:14px; }
.monitor-detail .project-detail-head .meta-row { font-size:11px; }
.monitor-detail .poll-settings-bar { padding:6px 10px; gap:6px; }
.monitor-detail .poll-settings-bar select { height:26px; font-size:12px; }
.monitor-detail .poll-settings-bar__label { font-size:12px; }
.monitor-detail .poll-settings-bar__hint { font-size:10px; }
.monitor-detail .subdevice-block { margin-bottom:6px; border-radius:8px; }
.monitor-detail .subdevice-block__head { padding:6px 8px; font-size:12px; }
.monitor-detail .subdevice-block__name { font-size:12px; font-weight:600; }
.monitor-detail .subdevice-block__meta { font-size:10px; }
.monitor-detail .subdevice-block__body { padding:6px 8px; }
.monitor-detail .monitor-section { margin-bottom:5px; }
.monitor-detail .monitor-section:last-child { margin-bottom:0; }
.monitor-detail .monitor-section__title { font-size:11px; margin-bottom:4px; gap:4px; }
.monitor-detail .monitor-section__count { min-width:16px; height:16px; padding:0 5px; font-size:9px; }
.monitor-detail .monitor-kpi-grid { grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:4px; }
.monitor-detail .monitor-kpi-card { min-height:52px; padding:5px 5px 4px 7px; border-radius:6px; }
.monitor-detail .monitor-kpi-card__bar { top:6px; bottom:6px; width:2px; }
.monitor-detail .monitor-kpi-card__label { font-size:10px; margin-bottom:1px; -webkit-line-clamp:1; line-height:1.25; }
.monitor-detail .monitor-kpi-card__value { font-size:14px; }
.monitor-detail .monitor-kpi-card__unit { font-size:9px; }
.monitor-detail .monitor-kpi-card__foot { margin-top:1px; font-size:9px; }
.monitor-detail .monitor-write-list { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:4px; }
.monitor-detail .monitor-write-row { padding:5px 7px; border-radius:6px; }
.monitor-detail .monitor-write-row__info { margin-bottom:5px; font-size:11px; gap:4px; }
.monitor-detail .monitor-write-row__info .tag { font-size:9px; padding:0 4px; }
.monitor-detail .monitor-write-row__ctrl input[type="number"] { width:72px; height:26px; font-size:11px; }
.monitor-detail .monitor-write-row__ctrl .btn-xs { height:26px; padding:0 7px; }
.monitor-detail .monitor-switch { height:26px; gap:6px; }
.monitor-detail .monitor-switch__track { width:40px; height:22px; }
.monitor-detail .monitor-switch__track::after { width:18px; height:18px; }
.monitor-detail .monitor-switch input:checked + .monitor-switch__track::after { transform:translateX(18px); }
.monitor-detail .monitor-switch__text { font-size:11px; }
.access-tag-readonly { color:#999; }
.access-tag-readwrite { color:#1677ff; }
.access-tag-writeonly { color:#fa8c16; }

.user-control-allowlist-box {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: #fafafa;
}
.user-control-allowlist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin: 4px 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}
.user-control-allowlist-item input { margin-top: 3px; }
.user-control-allowlist-item__meta { flex: 1; min-width: 0; }
.user-control-allowlist-item__name { font-size: 13px; font-weight: 500; color: #222; }
.user-control-allowlist-item__key { display: block; margin-top: 2px; font-size: 11px; color: #999; word-break: break-all; }

/* Empty state */
.empty { text-align:center; padding:48px 20px; color:var(--text-secondary); }
.empty .icon { font-size:48px; margin-bottom:12px; }
.empty p { font-size:14px; }

/* Tabs */
.tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:16px; }
.tab { padding:10px 20px; cursor:pointer; font-size:14px; color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.tab:hover { color:#1677ff; }
.tab.active { color:#1677ff; border-bottom-color:#1677ff; font-weight:500; }

/* Status dot */
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.status-online { background:#52c41a; box-shadow:0 0 6px rgba(82,196,26,.5); }
.status-offline { background:#d9d9d9; }

/* Auto refresh indicator */
.refresh-indicator { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text-secondary); }
.refresh-indicator .dot { width:6px; height:6px; border-radius:50%; background:#52c41a; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

@media (max-width:768px) {
  .sidebar { display:none; }
  .main { margin-left:0; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .monitor-grid { grid-template-columns:1fr; }
}

.site-icp {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  text-align: center; padding: 8px 12px; font-size: 12px;
  color: var(--text-secondary); background: rgba(255,255,255,.92);
  border-top: 1px solid var(--border);
}
.site-icp a { color: inherit; text-decoration: none; }
.site-icp a:hover { color: var(--primary); text-decoration: underline; }

/* 设备点位弹窗：紧凑添加表单 */
.pt-add-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.pt-add-bar__title { font-size: 13px; font-weight: 600; color: #333; }
.pt-add-bar__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-add-form {
  display: grid;
  grid-template-columns: minmax(110px, 1.4fr) minmax(88px, 1fr) 64px minmax(78px, 0.9fr) 56px 52px minmax(78px, 0.9fr) minmax(78px, 0.9fr) auto;
  gap: 6px 8px;
  align-items: end;
  margin-bottom: 8px;
}
.pt-add-field label {
  display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: #888; line-height: 1.2;
}
.pt-add-field input,
.pt-add-field select {
  width: 100%; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px;
  padding: 0 8px; font-size: 13px; outline: none; background: #fff;
}
.pt-add-field input:focus,
.pt-add-field select:focus {
  border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,.1);
}
.pt-add-field--btn .btn { height: 32px; padding: 0 12px; white-space: nowrap; }
.pt-add-divider { margin: 10px 0; border: none; border-top: 1px solid #f0f0f0; }
.pt-batch-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.pt-batch-bar select {
  height: 28px; border: 1px solid #d9d9d9; border-radius: 6px;
  padding: 0 6px; font-size: 12px; background: #fff;
}
.pt-batch-bar__sep { font-size: 12px; color: #888; margin-left: 2px; }
.pt-batch-bar__hint { font-size: 11px; color: #999; }
@media (max-width: 900px) {
  .pt-add-form {
    grid-template-columns: 1fr 1fr;
  }
  .pt-add-field--name,
  .pt-add-field--btn { grid-column: 1 / -1; }
}

.pt-list-title {
  margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: #333;
  display: flex; align-items: center; gap: 6px;
}
.pt-list-count {
  font-size: 11px; font-weight: 500; color: #8c8c8c;
  background: #f5f5f5; border-radius: 999px; padding: 1px 7px;
}
.pt-points-wrap {
  overflow: hidden;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}
.pt-points-wrap table {
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
  margin: 0;
  border-collapse: collapse;
}
.pt-points-wrap th,
.pt-points-wrap td {
  padding: 4px 4px;
  vertical-align: middle;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}
.pt-points-wrap th {
  background: #fafafa;
  font-size: 11px;
  font-weight: 600;
  color: #8c8c8c;
}
.pt-points-wrap tr:last-child td { border-bottom: none; }
.pt-points-wrap tr:hover td { background: #fafcff; }
/* ☑ 名称 地址 类型 单位 访问 分组 周期 操作 — 百分比总和 100% */
.pt-points-wrap th:nth-child(1),
.pt-points-wrap td:nth-child(1) { width: 3%; text-align: center; padding-left: 2px; padding-right: 0; }
.pt-points-wrap th:nth-child(2),
.pt-points-wrap td:nth-child(2) { width: 16%; }
.pt-points-wrap th:nth-child(3),
.pt-points-wrap td:nth-child(3) { width: 8%; }
.pt-points-wrap th:nth-child(4),
.pt-points-wrap td:nth-child(4) { width: 9%; }
.pt-points-wrap th:nth-child(5),
.pt-points-wrap td:nth-child(5) { width: 6%; }
.pt-points-wrap th:nth-child(6),
.pt-points-wrap td:nth-child(6) { width: 14%; }
.pt-points-wrap th:nth-child(7),
.pt-points-wrap td:nth-child(7) { width: 12%; }
.pt-points-wrap th:nth-child(8),
.pt-points-wrap td:nth-child(8) { width: 14%; }
.pt-points-wrap th:nth-child(9),
.pt-points-wrap td:nth-child(9) {
  width: 8%;
  text-align: center;
  padding-left: 2px;
  padding-right: 4px;
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 1;
}
.pt-points-wrap th:nth-child(9) { background: #fafafa; }
.pt-points-wrap tr:hover td:nth-child(9) { background: #fafcff; }
.pt-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #262626;
  font-weight: 500;
}
.pt-sel {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 26px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 0 0 0 2px;
  font-size: 11px;
  line-height: 24px;
  background: #fff;
  color: #595959;
  box-sizing: border-box;
}
.pt-sel--iv { font-size: 11px; }
.btn-link-danger {
  border: none; background: none; color: #ff4d4f;
  font-size: 12px; cursor: pointer; padding: 0 2px;
  white-space: nowrap;
}
.btn-link-danger:hover { color: #ff7875; text-decoration: underline; }