/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/*
 * 手机模拟器 UI 样式层
 * 设计令牌全部提取自 v2.0 海外版 PPT 的 App 效果图（prd-site/ref/slide2x_*.png）：
 * 主色 #3E9C47、页面底色 #F2F5F9、白卡圆角 14/16、状态 chip 三色、底部四 Tab、地图浮动控件。
 */

:root {
  --g-900: #1F5B27;
  --g-700: #2F7A38;
  --g-500: #3E9C47;
  --g-300: #7BC085;
  --g-100: #E6F4EA;
  --g-050: #F1F8F2;

  --ink: #1A1F1C;
  --ink-2: #37423C;
  --ink-3: #5A6B62;
  --ink-4: #8A9199;
  --ink-5: #A8B0AC;

  --page: #F2F5F9;
  --line: #EEF1F4;
  --line-2: #E3E8EE;
  --fill: #EDF1F5;

  --danger: #E5484D;
  --danger-d: #D93A3F;
  --danger-100: #FCE9EA;
  --warn: #F5A623;
  --warn-100: #FEF3E0;
  --ok: #12B74F;
  --blue: #2D7DFF;
  --blue-100: #E7F0FF;

  --sh-1: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-2: 0 4px 16px rgba(16, 24, 40, 0.1);
  --sh-3: 0 8px 28px rgba(16, 24, 40, 0.18);

  --app-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "Microsoft YaHei", sans-serif;

  --phone-w: 399px;
  --phone-h: 836px;
}

/* ============ 手机外框 ============ */
.phone {
  width: 399px;
  height: 836px;
  background: #14181c;
  border-radius: 46px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(12, 22, 16, 0.28), 0 2px 0 #2b3238 inset;
  flex: none;
  position: relative;
}
.phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 60;
}
.screen {
  width: 375px;
  height: 812px;
  border-radius: 36px;
  overflow: hidden;
  background: var(--page);
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--app-font);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.screen * {
  box-sizing: border-box;
}
#screenRoot,
#protoLbScreenRoot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.screen button {
  font-family: inherit;
}

/* ============ 状态栏 / 导航栏 / Tab 栏 ============ */
.sbar {
  height: 44px;
  flex: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  z-index: 5;
}
.sbar .sb-right {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
}
.sbar.on-dark,
.sbar.on-dark .sb-right {
  color: #fff;
}

.nbar {
  height: 52px;
  flex: none;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  z-index: 5;
}
.nbar .nb-title {
  position: absolute;
  left: 46px;
  right: 46px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nbar .nb-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
  z-index: 2;
  background: none;
  border: 0;
  padding: 0;
}
.nbar .nb-btn:hover {
  background: #f4f6f8;
}
.nbar .nb-btn.g {
  color: var(--g-500);
}
.nbar .nb-sp {
  flex: 1;
}

.body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.body::-webkit-scrollbar {
  width: 0;
}
.body.flat {
  background: var(--page);
}
.body.white {
  background: #fff;
}
.body.nopad {
  padding: 0;
}

.tbar {
  height: 68px;
  flex: none;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 5;
}
.tbar .t-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
.tbar .t-item.on {
  color: var(--g-700);
  font-weight: 800;
  background: var(--g-050);
}

/* ============ 通用组件 ============ */
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-1);
  margin: 9px 14px;
  padding: 13px;
}
.card.tight {
  padding: 11px 12px;
}
.card.flush {
  padding: 0;
  overflow: hidden;
}
.sec-gap {
  height: 6px;
}

.seg {
  flex: none;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 8px 12px 12px;
  gap: 2px;
}
.seg .pill {
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
  white-space: nowrap;
  border: 0;
  background: none;
}
.seg .pill.on {
  background: var(--g-500);
  color: #fff;
}
.seg .sep {
  width: 1px;
  height: 15px;
  background: var(--line-2);
  flex: none;
}
.seg.grow .pill {
  flex: 1;
}

.tier-compare {
  font-size: 11.5px;
  width: 100%;
  border-collapse: collapse;
}
.tier-compare th,
.tier-compare td {
  padding: 7px 6px;
  text-align: center;
  border-bottom: 1px solid #EEF2EF;
  color: var(--ink-2);
}
.tier-compare th:first-child,
.tier-compare td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}
.tier-compare th.tier-current,
.tier-compare td.tier-current {
  background: #E6F4EA;
}
.tier-compare th small {
  display: block;
  font-weight: 600;
  color: #2F7A38;
  font-size: 10px;
}
  flex: 1;
  text-align: center;
  padding: 9px 4px;
}

.searchbar {
  margin: 10px 14px 4px;
  height: 42px;
  border-radius: 21px;
  background: var(--fill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #98a2ae;
  font-size: 14.5px;
  padding: 0 14px;
}
.searchbar input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  outline: none;
  min-width: 0;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.avatar.s-on {
  background: var(--g-500);
}
.avatar.s-alert {
  background: var(--danger-d);
}
.avatar.s-off {
  background: var(--ink-5);
}

.chip {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  flex: none;
  white-space: nowrap;
}
.chip.s-on {
  background: var(--g-100);
  color: var(--g-700);
}
.chip.s-alert {
  background: var(--danger-100);
  color: var(--danger-d);
}
.chip.s-off {
  background: var(--line);
  color: var(--ink-4);
}
.chip.s-neutral {
  background: #f1f4f7;
  color: var(--ink-3);
  font-weight: 500;
}
.chip.s-warn {
  background: #fdf1de;
  color: #b87400;
}

.btn {
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  border: 1.6px solid transparent;
  background: none;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  box-shadow: none;
}
.btn-o {
  border-color: var(--g-700);
  border-width: 2px;
  color: var(--g-700);
  background: #fff;
}
.btn-p {
  background: var(--g-700);
  color: #fff;
}
.btn-d {
  border-color: var(--danger);
  color: var(--danger);
  background: #fff;
}
.btn-n {
  border-color: var(--line-2);
  color: var(--ink-3);
  background: #fff;
}
.btn.sm {
  height: 38px;
  font-size: 13.5px;
  border-radius: 9px;
}
.btn.pillr {
  border-radius: 26px;
  height: 52px;
  font-size: 17px;
}
.actionbar {
  flex: none;
  padding: 10px 14px 12px;
  display: flex;
  gap: 12px;
  background: var(--page);
}
.actionbar.on-white {
  background: #fff;
  border-top: 1px solid var(--line);
}
.actionbar .btn {
  flex: 1;
}
.actionbar.alert-bar {
  flex-wrap: wrap;
}
.actionbar.alert-bar .btn {
  flex: 1 1 42%;
  min-height: 52px;
}

.sw {
  width: 50px;
  height: 28px;
  border-radius: 14px;
  background: #d9dee3;
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background 0.18s;
}
.sw i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.18s;
}
.sw.on {
  background: var(--g-500);
}
.sw.on i {
  left: 24px;
}

.lrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid #f0f3f6;
  background: #fff;
  cursor: pointer;
  min-height: 56px;
}
.lrow:last-child {
  border-bottom: 0;
}
.lrow .icap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--g-050);
  display: grid;
  place-items: center;
  color: var(--g-500);
  flex: none;
}
.lrow .lbl {
  flex: 1;
  font-size: 15.5px;
  color: var(--ink-2);
}
.lrow .lbl small {
  display: block;
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 3px;
}
.lrow .val {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  max-width: 55%;
}
.lrow .val.muted {
  color: var(--ink-4);
  font-weight: 500;
}
.lrow .chev {
  color: #c3cbd3;
  flex: none;
}
.lrow.plain {
  cursor: default;
}

/* 键值信息表（Device Information 效果图） */
.kv {
  background: #fff;
}
.kv .krow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f3f6;
  min-height: 52px;
}
.kv .krow .k {
  flex: 1;
  font-size: 15px;
  color: #6b7280;
}
.kv .krow .v {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.kv .krow .v.dash {
  color: var(--ink-4);
  font-weight: 500;
}
.legal {
  background: #f4f8fb;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--ink-3);
}
.legal a {
  color: var(--g-500);
  text-decoration: none;
  font-weight: 600;
}

.empty {
  padding: 60px 30px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13.5px;
  line-height: 1.8;
}
.empty .ei {
  color: #d3dae0;
  margin-bottom: 10px;
}

.hint {
  margin: 4px 14px 10px;
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.6;
}

/* ============ 首页 ============ */
.hero {
  flex: none;
  position: relative;
  height: 196px;
  overflow: hidden;
}
.hero .hero-art {
  position: absolute;
  inset: 0;
}
.hero .hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero .hero-info {
  position: absolute;
  left: 20px;
  top: 26px;
  z-index: 2;
}
.hero .hdev {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 27px;
  font-weight: 700;
  color: #17301c;
  letter-spacing: 0.3px;
}
.hero .hdev .swap {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #1f5b27;
  cursor: pointer;
  border-radius: 8px;
}
.hero .hdev .swap:hover {
  background: rgba(255, 255, 255, 0.45);
}
.hero .hbatt {
  margin-top: 8px;
  font-size: 16px;
  color: #23402a;
  font-weight: 500;
}
.hero .hstate {
  margin-top: 12px;
}
.hero .hstate .chip {
  font-size: 14px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-3);
}
.hero .hstate .chip.s-on {
  background: rgba(255, 255, 255, 0.85);
  color: var(--g-700);
}

.grid9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
}
.grid9 .tile {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-1);
  height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.grid9 .tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.grid9 .tile .ti {
  color: var(--g-500);
  height: 36px;
  display: grid;
  place-items: center;
}
.grid9 .tile .tl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.35;
  padding: 0 6px;
}

.marquee {
  margin: 0 14px 4px;
  background: var(--danger-100);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--danger-d);
  cursor: pointer;
  overflow: hidden;
}
.marquee .mq-txt {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 设备行 ============ */
.devrow {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.devrow .dmain {
  flex: 1;
  min-width: 0;
}
.devrow .dtop,
.devrow .dbot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.devrow .dtop {
  min-height: 26px;
}
.devrow .dname {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devrow .dbatt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 5px;
}
.devrow .dbatt .bi {
  display: flex;
  color: var(--g-500);
}
.devrow .dbatt.low {
  color: var(--danger-d);
}
.devrow .dbatt.low .bi {
  color: var(--danger);
}
.devrow .dbot {
  margin-top: 5px;
}
.devrow .dmode {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devrow .more {
  color: #b9c2ca;
  cursor: pointer;
  padding: 2px;
}
.devrow .ck {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.8px solid #cdd5dc;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  margin-top: 13px;
  cursor: pointer;
}
.devrow .ck.on {
  background: var(--g-500);
  border-color: var(--g-500);
}

/* ============ 告警卡片 ============ */
.alert-card .ac-top {
  display: flex;
  gap: 13px;
}
.alert-card .ac-ttl {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.alert-card .ac-desc {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  display: flex;
  gap: 6px;
}
.alert-card .ac-desc .di {
  flex: none;
  margin-top: 2px;
}
.alert-card .ac-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.alert-card .ac-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-4);
}
.alert-card .ac-note {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--g-050);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.alert-card .ac-note b {
  display: block;
  margin-bottom: 2px;
  color: var(--g-700);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.alert-card.is-actionable:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 24%, transparent);
  outline-offset: 2px;
}
.alert-card.alert-selecting { cursor: pointer; }
.alert-card.alert-selected {
  border-color: var(--g-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-500) 16%, transparent);
}
.alert-card.alert-unavailable { opacity: 0.62; }
.alert-select-box {
  position: relative;
  width: 44px;
  height: 44px;
  margin: -4px -3px -4px -5px;
  display: grid;
  place-items: center;
  flex: none;
}
.alert-select-box::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-2);
  border-radius: 7px;
  background: var(--surface);
}
.alert-card.alert-selected .alert-select-box::before {
  border-color: var(--g-500);
  background: var(--g-500);
}
.alert-select-box svg {
  position: absolute;
  width: 14px;
  height: 14px;
  color: var(--surface);
  pointer-events: none;
}
.alert-device-meta {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: var(--ink-4);
  font-size: 11.5px;
  line-height: 1.45;
}
.alert-device-meta span { display: inline-flex; align-items: center; gap: 4px; }
.alert-device-meta .has-remark { color: var(--g-700); font-weight: 650; }
.alert-filter-summary {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.alert-filter-summary button {
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--g-700);
  font-weight: 700;
}

.alert-filter-panel { padding: 0 16px 14px; }
.alert-filter-panel .sh-ttl { padding-inline: 0; text-align: left; }
.alert-filter-field { margin-top: 12px; }
.alert-filter-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 750;
}
.alert-filter-types { display: flex; flex-wrap: wrap; gap: 8px; }
.alert-filter-type {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
}
.alert-filter-type.on {
  border-color: var(--g-500);
  background: var(--g-050);
  color: var(--g-700);
  font-weight: 700;
}
.alert-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 10px;
  margin-top: 16px;
}
.alert-filter-actions .btn { min-height: 48px; }
.alert-resolve-body {
  padding: 0 20px 18px;
  text-align: left;
}
.alert-resolve-summary {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--g-050);
}
.alert-resolve-summary b,
.alert-resolve-summary span {
  display: block;
}
.alert-resolve-summary b {
  margin-bottom: 3px;
  font-size: 14px;
}
.alert-resolve-summary span,
.alert-resolve-help {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}
.alert-resolve-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.alert-resolve-input {
  min-height: 96px;
  height: auto;
  margin-bottom: 6px;
  padding-top: 10px;
  resize: vertical;
  line-height: 1.5;
}
.alert-resolve-input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}
.alert-resolve-help.error {
  color: var(--danger-d);
}
.alert-detail-body {
  padding: 0 20px 18px;
}
.alert-detail-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.alert-detail-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.5;
}
.alert-detail-row + .alert-detail-row {
  border-top: 1px solid var(--line);
}
.alert-detail-row span {
  color: var(--ink-4);
}
.alert-detail-row b {
  min-width: 0;
  color: var(--ink-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.alert-detail-note {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--g-050);
}
.alert-detail-note span {
  display: block;
  margin-bottom: 4px;
  color: var(--g-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.alert-detail-note p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.alert-card.unread {
  position: relative;
}
/* 未读标记收进卡片内的左上角，效果图里卡片外沿是干净的 */
.alert-card.unread::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
}

/* ============ 地图 ============ */
.map {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #3d5a3a;
  min-height: 120px;
}
.map-viewport {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 240ms ease-out;
  will-change: transform;
}
.map .map-art {
  position: absolute;
  inset: 0;
}
.map .map-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-art.osm svg {
  filter: saturate(0.72) hue-rotate(18deg) brightness(1.28);
}
.map-art.topo svg {
  filter: sepia(0.38) saturate(1.15) hue-rotate(-12deg) contrast(1.05);
}
.map-attr {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 4;
  max-width: 72%;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: #5a6b62;
  font-size: 9.5px;
  line-height: 1.3;
  pointer-events: none;
}
.map-ctrl {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 3;
}
.map-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
  color: #2a3b33;
  cursor: pointer;
  border: 0;
}
.map-btn:hover {
  color: var(--g-500);
}
.map-zoom {
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 40px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--sh-2);
  overflow: hidden;
  z-index: 3;
}
.map-zoom button {
  width: 40px;
  height: 38px;
  border: 0;
  background: #fff;
  color: #2a3b33;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.map-zoom button + button {
  border-top: 1px solid var(--line);
}
.map-refresh {
  position: absolute;
  left: 12px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
  color: var(--g-500);
  cursor: pointer;
  z-index: 3;
  border: 0;
  font-size: 11px;
  font-weight: 700;
}
/* 自动刷新倒秒数，套在刷新箭头中间 */
.map-refresh .rc {
  position: absolute;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--g-600);
  line-height: 1;
}
.map-zoom.lift,
.map-refresh.lift {
  bottom: 238px;
}

.pin {
  position: absolute;
  transform: translate(-50%, -100%) scale(var(--map-pin-scale, 1));
  transform-origin: 50% 100%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pin::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--pin-bg, var(--g-500));
}
.pin.s-on {
  background: var(--g-500);
  --pin-bg: var(--g-500);
}
.pin.s-alert {
  background: var(--danger-d);
  --pin-bg: var(--danger-d);
}
.pin.s-off {
  background: var(--ink-5);
  --pin-bg: var(--ink-5);
}
.pin.big {
  width: 42px;
  height: 42px;
}
.pin.big::after {
  bottom: -8px;
  border-left-width: 7px;
  border-right-width: 7px;
  border-top-width: 11px;
}
/* 挂在点位上方的名称气泡 */
.pin .pl {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 31, 28, 0.78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.pin-label {
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(26, 31, 28, 0.78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2;
}


/* 地图点位聚合：数量级仅用尺寸/环形层级表达，红色角标只表示异常。 */
.cluster-pin {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: cluster-pop 180ms ease-out both;
}
.cluster-pin:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 36%, transparent);
  outline-offset: 2px;
  border-radius: 50%;
}
.cluster-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cluster-size);
  height: var(--cluster-size);
  border-radius: 50%;
  background: var(--g-700);
  color: #fff;
  border: 3px solid rgba(255,255,255,.94);
  box-shadow: 0 4px 12px rgba(20,40,28,.28), 0 0 0 var(--cluster-ring) rgba(62,156,71,.18);
  font-size: var(--cluster-font);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cluster-pin:hover .cluster-dot,
.cluster-pin:active .cluster-dot,
.cluster-pin.selected .cluster-dot {
  transform: scale(1.08);
  box-shadow: 0 5px 14px rgba(20,40,28,.34), 0 0 0 calc(var(--cluster-ring) + 2px) rgba(62,156,71,.24);
}
.cluster-pin.small { --cluster-size: 34px; --cluster-font: 12px; --cluster-ring: 2px; }
.cluster-pin.medium { --cluster-size: 40px; --cluster-font: 12px; --cluster-ring: 4px; }
.cluster-pin.large { --cluster-size: 46px; --cluster-font: 11.5px; --cluster-ring: 6px; }
.cluster-alert {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(64,20,20,.24);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cluster-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  max-width: 190px;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.92);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
}
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cluster-pop {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.82); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .map-viewport { transition: none; }
  .cluster-pin { animation: none; }
  .cluster-dot { transition: none; }
}

.map-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sh-3);
  padding: 14px 15px;
  z-index: 4;
}
.map-sheet .ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.map-sheet .ms-name {
  font-size: 17px;
  font-weight: 700;
}
.map-sheet .ms-chips {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  flex-wrap: wrap;
}
.map-sheet .ms-meta {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.map-sheet .ms-meta .mi {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-sheet .ms-addr {
  margin-top: 9px;
  display: flex;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.map-sheet .ms-addr .di {
  flex: none;
  margin-top: 2px;
}
.map-sheet .ms-acts {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: flex;
}
.map-sheet .ms-acts .a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--g-500);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.map-sheet .ms-acts .a + .a {
  border-left: 1px solid var(--line);
}

/* 实时追踪：移除顶部切换入口后，地图控件恢复顶部位置 */
.monitoring-map .map-ctrl {
  top: 12px;
}
.monitor-device-row:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--g-500) 28%, transparent);
  outline-offset: 2px;
}
.monitor-device-row {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  border: 1px solid transparent;
  text-align: left;
  color: var(--ink);
}
.monitor-device-row.current {
  border-color: var(--g-500);
  background: var(--g-050);
}
.monitor-device-current {
  flex: none;
  color: var(--g-700);
  background: var(--g-100);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.monitor-picker-note {
  padding: 0 14px 10px;
  color: var(--ink-3);
  font-size: 11.5px;
}

/* 监控中心顶部设备卡横滑 */
.devstrip {
  flex: none;
  background: #fff;
  padding: 10px 0 12px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-left: 12px;
  padding-right: 12px;
}
.devstrip::-webkit-scrollbar {
  height: 0;
}
.devstrip .dcard {
  flex: none;
  width: 194px;
  border: 1.4px solid var(--line-2);
  border-radius: 11px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
}
.devstrip .dcard.on {
  border-color: var(--g-500);
  background: var(--g-050);
}
.devstrip .dcard .r1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.devstrip .dcard .ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.devstrip .dcard .nm {
  font-size: 14.5px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devstrip .dcard .bt {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--ok);
}
.devstrip .dcard .bt.low {
  color: var(--danger);
}
.devstrip .dcard .r2 {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* 历史轨迹 */
.play-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sh-2);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 4;
}
.play-bar .pb-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.6px solid var(--g-500);
  color: var(--g-500);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  background: #fff;
}
.play-bar .rate {
  font-size: 15px;
  font-weight: 700;
  color: var(--g-500);
  flex: none;
}
.slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line-2);
  position: relative;
  cursor: pointer;
}
.slider .fill {
  height: 100%;
  border-radius: 3px;
  background: var(--g-500);
}
.slider .knob {
  position: absolute;
  top: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
}

.sheet-panel {
  flex: none;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.1);
  padding: 8px 16px 4px;
  max-height: 330px;
  overflow-y: auto;
}
.sheet-panel::-webkit-scrollbar {
  width: 0;
}
.command-history-type-trigger:focus-visible,
.command-history-type-option:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-500) 26%, transparent); outline-offset: 2px; }
.command-history-type-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.command-history-type-trigger span { color: var(--g-700); font-weight: 700; }
.command-history-type-picker { padding: 0 16px 14px; }
.command-history-type-picker .sh-ttl { padding-inline: 0; text-align: left; }
.command-history-type-options { display: flex; flex-direction: column; max-height: min(58vh, 420px); overflow-y: auto; border-top: 1px solid var(--line); }
.command-history-type-option {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.command-history-type-option.on { color: var(--g-700); font-weight: 700; }
.command-history-type-option:hover { background: var(--g-050); }
.sheet-panel .grabber {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e2e7ec;
  margin: 2px auto 12px;
}
.sheet-panel .sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sheet-panel .sp-ttl {
  font-size: 19px;
  font-weight: 700;
}
.stats3 {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.stats3 .st {
  flex: 1;
  padding: 11px 6px;
  text-align: center;
}
.stats3 .st + .st {
  border-left: 1px solid var(--line);
}
.stats3 .st .sl {
  font-size: 12px;
  color: var(--ink-4);
}
.stats3 .st .sv {
  font-size: 16.5px;
  font-weight: 700;
  margin-top: 5px;
}

.tline {
  margin-top: 14px;
  position: relative;
  padding-left: 20px;
}
.tline .tp {
  position: relative;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 13px;
}
.tline .tp:not(:last-child)::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  bottom: -24px;
  width: 2px;
  background: var(--g-300);
}
.tline .tp:last-child {
  border-bottom: 0;
}
.tline .tp .dot {
  position: absolute;
  left: -18px;
  top: 6px;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-500);
}
.tline .tp.stop .dot {
  background: var(--danger);
}
.tline .tp .tt {
  font-size: 13px;
  color: var(--ink-4);
}
.tline .tp .td {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
}
.history-point {
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.history-point:hover {
  background: var(--g-050);
}
.history-point.is-selected {
  background: var(--g-050);
  box-shadow: -8px 0 0 var(--g-050), 8px 0 0 var(--g-050);
}
.history-point.is-selected .dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-500) 22%, transparent);
}
.history-point:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 26%, transparent);
  outline-offset: 2px;
}

/* 历史轨迹：顶部时间入口与设备详情卡 */
.history-time-selector {
  width: calc(100% - 24px);
  min-height: 46px;
  margin: 7px 12px;
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  text-align: left;
  box-shadow: var(--sh-1);
  cursor: pointer;
}
.history-time-selector:hover {
  border-color: var(--g-300);
  background: var(--g-050);
}
.history-time-selector:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 28%, transparent);
  outline-offset: 1px;
}
.history-time-icon,
.history-time-chevron {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.history-time-icon {
  background: var(--g-100);
  color: var(--g-700);
}
.history-time-chevron {
  margin-left: auto;
  background: var(--page);
  color: var(--ink-4);
}
.history-time-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.history-time-copy strong {
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.history-device-head {
  flex: none;
}
.history-stats {
  margin-top: 12px;
  flex: none;
  background: var(--g-050);
  border-color: transparent;
}
.history-stats .st {
  padding: 9px 5px;
}
.history-stats .sv {
  font-size: 14px;
}

/* 实时追踪详情卡：设备头部、统计与当前经纬度点位 */
.tracking-sheet {
  max-height: 310px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tracking-device-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.tracking-device-copy {
  min-width: 0;
  flex: 1;
}
.tracking-device-copy h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tracking-device-copy h2 small {
  margin-left: 3px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}
.tracking-device-copy .tracking-battery {
  display: inline-flex;
  margin-top: 4px;
  flex: none;
}
.tracking-switch-device {
  min-height: 34px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sh-1);
}
.tracking-switch-device:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--g-500) 28%, transparent);
  outline-offset: 2px;
}
.tracking-sheet .tracking-stats {
  margin-top: 12px;
  flex: none;
  background: var(--g-050);
  border-color: transparent;
}
.tracking-sheet .tracking-stats .st {
  padding: 9px 5px;
}
.tracking-sheet .tracking-stats .sv {
  font-size: 14px;
}
.tracking-point-list {
  flex: 1;
  min-height: 0;
  margin-top: 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.tracking-point-list::-webkit-scrollbar {
  width: 0;
}
.tracking-point-list .tp {
  min-height: 66px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tracking-point-list .tp:not(:last-child)::before {
  bottom: -10px;
}
/* 围栏编辑 */
.fence-map-tip {
  position: absolute;
  left: 12px;
  right: 64px;
  top: 12px;
  min-height: 44px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--page);
  color: var(--ink-2);
  box-shadow: var(--sh-2);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
}
.fence-map-tip svg {
  color: var(--g-500);
  flex: none;
}
.fence-center-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.fence-center-hit::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--g-500);
  border-radius: 50%;
  background: var(--g-100);
  box-shadow: var(--sh-1);
  transition: transform 0.16s ease, background 0.16s ease;
}
.fence-center-hit:hover::before {
  background: var(--g-050);
  transform: scale(1.06);
}
.fence-center-hit:focus-visible {
  outline: 3px solid var(--g-300);
  outline-offset: 3px;
}
.fence-center-hit .fence-dot {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 1;
}
.fence-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(45, 125, 255, 0.26);
  border: 1.6px solid var(--blue);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.fence-circle.restricted {
  background: rgba(245, 166, 35, 0.24);
  border-color: #f5a623;
}
.fence-cross {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fence-cross i {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
}
.fence-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.fence-tag {
  position: absolute;
  transform: translate(-50%, 0);
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  z-index: 3;
  white-space: nowrap;
}
.fence-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  background: #2f3734;
}
.fence-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.row-acts {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: flex;
}
.row-acts .a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--g-500);
}
.row-acts .a.del {
  color: var(--danger);
}
.row-acts .a + .a {
  border-left: 1px solid var(--line);
}

/* 启动 / 引导 / 登录 */
.splash {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9f1 46%, #d9eedb 100%);
  overflow: hidden;
}
.brand-logo {
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  z-index: 2;
}
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.splash .brand-logo {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.splash .wm {
  margin-top: 22px;
  font-size: 27px;
  font-weight: 700;
  color: #1f5b27;
  letter-spacing: 0.4px;
  z-index: 2;
}
.splash .sub {
  margin-top: 8px;
  font-size: 13px;
  color: #4e7a55;
  z-index: 2;
}
.splash .grass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
}
.splash .grass svg {
  width: 100%;
  height: 100%;
  display: block;
}
.splash .tap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 3;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #5b8a62;
  animation: tapFade 1.9s ease-in-out infinite;
}
@keyframes tapFade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.boot-form-body {
  padding: 14px 14px 24px;
}
.boot-form-body > :first-child {
  margin-top: 0;
}
.reg-method {
  display: flex;
  background: #eef2f5;
  border-radius: 10px;
  padding: 4px;
  margin: 0 0 14px;
}
.reg-method button {
  flex: 1;
  height: 36px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
}
.reg-method button.on {
  background: #fff;
  color: var(--g-700);
  box-shadow: var(--sh-1);
}

.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 26px 22px;
  background: linear-gradient(180deg, #ffffff, #f4faf5 70%, #eaf4ec);
  overflow-y: auto;
}
.login .brand-logo {
  margin: 12px auto 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.login h2 {
  text-align: center;
  margin: 14px 0 4px;
  font-size: 22px;
  font-weight: 700;
}
.login .lg-sub {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-4);
  margin-bottom: 18px;
}
.login .lg-tabs {
  display: flex;
  background: #eef2f5;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
}
.login .lg-tabs button {
  flex: 1;
  height: 36px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
}
.login .lg-tabs button.on {
  background: #fff;
  color: var(--g-700);
  box-shadow: var(--sh-1);
}
.field {
  height: 50px;
  border-radius: 12px;
  background: #fff;
  border: 1.4px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  margin-bottom: 12px;
}
.field .fi {
  color: var(--ink-4);
  flex: none;
}
.field input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
}
.field:focus-within {
  border-color: var(--g-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-500) 18%, transparent);
}
.field:focus-within .fi {
  color: var(--g-700);
}
.field .eye {
  color: var(--ink-4);
  cursor: pointer;
}
.field.code-field {
  gap: 8px;
  padding-right: 6px;
}
.field.code-field input {
  min-width: 0;
}
.code-send {
  flex: none;
  min-width: 104px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--line-2);
  background: transparent;
  color: var(--g-600);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.code-send:hover {
  color: var(--g-700);
}
.code-send:focus-visible {
  outline: 2px solid var(--g-300);
  outline-offset: -3px;
  border-radius: 8px;
}
.code-send:disabled {
  color: var(--ink-4);
  cursor: not-allowed;
}
.field.select {
  cursor: pointer;
  justify-content: space-between;
}
.chkline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 4px 0 12px;
  line-height: 1.55;
  cursor: pointer;
}
.chk {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.6px solid #c6ced5;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  margin-top: 1px;
}
.chk.on {
  background: var(--g-500);
  border-color: var(--g-500);
}
.chkline a {
  color: var(--g-500);
  font-weight: 600;
  text-decoration: none;
}
.login .lg-foot {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
  color: var(--ink-4);
  padding-top: 18px;
}

/* 弹窗层 */
.dlg-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
}
.dlg-layer.show {
  display: block;
}
.dlg-mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 22, 0.42);
}
.dlg-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}
.dlg-card {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.dlg-card .dt {
  padding: 20px 20px 6px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.dlg-card .dm {
  padding: 4px 20px 18px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65;
  text-align: center;
}
.dlg-card .dm.left {
  text-align: left;
  max-height: 240px;
  overflow-y: auto;
}
.dlg-card .dm.left b {
  color: var(--ink-2);
}
.dlg-card .da {
  display: flex;
  border-top: 1px solid var(--line);
}
.dlg-card .da button {
  flex: 1;
  height: 50px;
  border: 0;
  background: #fff;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  font-family: inherit;
}
.dlg-card .da button + button {
  border-left: 1px solid var(--line);
}
.dlg-card .da button.pri {
  color: var(--g-500);
  font-weight: 700;
}
.dlg-card .da button.danger {
  color: var(--danger);
}
.dlg-card .dbody {
  padding: 4px 20px 18px;
}
.dlg-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.2);
  animation: sheetUp 0.2s ease-out;
}
@keyframes sheetUp {
  from {
    transform: translateY(24px);
  }
  to {
    transform: translateY(0);
  }
}
.dlg-sheet .sh-ttl {
  text-align: center;
  padding: 16px;
  font-size: 15px;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line);
}
.dlg-sheet .sh-sec {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #8a9199;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dlg-sheet .sh-item {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16.5px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.dlg-sheet .sh-item:hover {
  background: #f7f9fa;
}
.dlg-sheet .sh-item.pri {
  color: var(--g-500);
  font-weight: 700;
}
.dlg-sheet .sh-item.danger {
  color: var(--danger);
}
.dlg-sheet .sh-cancel {
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  border-top: 6px solid #f2f5f9;
}
.dlg-input {
  height: 46px;
  border-radius: 10px;
  border: 1.4px solid var(--line-2);
  padding: 0 12px;
  width: 100%;
  font-size: 14.5px;
  font-family: inherit;
  outline: 0;
  margin-bottom: 10px;
}
.dlg-input:focus {
  border-color: var(--g-500);
}

.toast-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast {
  background: rgba(26, 31, 28, 0.88);
  color: #fff;
  font-size: 13.5px;
  padding: 12px 20px;
  border-radius: 12px;
  max-width: 260px;
  text-align: center;
  line-height: 1.55;
  animation: toastIn 0.16s ease-out;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.spin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 10px;
}
.spin.g {
  border-color: var(--g-100);
  border-top-color: var(--g-500);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.progress {
  height: 8px;
  border-radius: 4px;
  background: var(--line-2);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--g-500);
  border-radius: 4px;
}

/* 地图气泡 */
.map-pop {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sh-3);
  padding: 11px 13px;
  width: 218px;
  z-index: 10;
  margin-top: -12px;
}
.map-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
}
.map-pop .mp-n {
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.map-pop .mp-r {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 5px;
}
.map-pop .mp-a {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
}
.map-pop .mp-a span {
  color: var(--g-500);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* 地图单设备详情弹层 */
.map-device-sheet {
  padding: 0 0 12px;
  background: linear-gradient(180deg, #f4f8ff 0, #fff 126px);
}
.map-device-grabber {
  width: 42px;
  height: 4px;
  margin: 8px auto 4px;
  border-radius: 999px;
  background: #d8e0ea;
}
.map-device-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 14px;
}
.map-device-title {
  flex: 1;
  min-width: 0;
}
.map-device-title h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-device-title h2 small {
  margin-left: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.map-device-title .chip {
  margin-top: 6px;
}
.map-device-close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-3);
  box-shadow: var(--sh-1);
  cursor: pointer;
}
.map-device-details {
  margin: 0 14px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
}
.map-device-detail {
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.map-device-detail:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.map-device-detail span,
.map-device-detail b {
  display: block;
}
.map-device-detail span {
  font-size: 11.5px;
  color: var(--ink-4);
}
.map-device-detail b {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.map-device-pair-row,
.map-device-full-row {
  grid-column: 1 / -1;
}
.map-device-pair-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.map-device-pair-row .map-device-detail,
.map-device-full-row .map-device-detail {
  border-bottom: 0;
}
.map-device-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  padding: 10px 12px 0;
  border-top: 1px solid var(--line);
}
.map-device-actions button {
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 700 13.5px var(--app-font);
  cursor: pointer;
}
.map-device-actions.has-location {
  grid-template-columns: repeat(4, 1fr);
}
.map-device-actions button + button {
  border-left: 1px solid var(--line);
}
.map-device-actions svg {
  color: var(--ink-2);
}

/* 地图设备编辑页 */
.device-edit-body {
  padding: 14px;
}
.device-edit-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.device-edit-field {
  display: block;
  padding: 14px 14px 15px;
  border-bottom: 1px solid var(--line);
}
.device-edit-field:last-child {
  border-bottom: 0;
}
.device-edit-field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.device-edit-field > small {
  display: block;
  margin-top: 7px;
  color: var(--ink-4);
  font-size: 11.5px;
  line-height: 1.45;
}
.device-edit-field .field {
  height: 46px;
  margin: 0;
}
.device-edit-static,
.device-edit-picker {
  width: 100%;
  min-height: 68px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  font-family: var(--app-font);
}
.device-edit-static span,
.device-edit-picker small {
  display: block;
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1.35;
}
.device-edit-static b,
.device-edit-picker b {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.4;
}
.device-edit-static {
  flex-direction: column;
  align-items: flex-start;
}
.device-edit-picker {
  cursor: pointer;
}
.device-edit-picker > span {
  flex: 1;
  min-width: 0;
}
.device-edit-picker svg {
  flex: none;
  color: var(--ink-4);
}
.device-edit-picker:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 24%, transparent);
  outline-offset: -3px;
}
.device-edit-select select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--ink);
  font: 14.5px var(--app-font);
}
.device-edit-select svg {
  flex: none;
  color: var(--ink-4);
  pointer-events: none;
}
.device-edit-frequency em {
  flex: none;
  color: var(--ink-4);
  font-size: 12px;
  font-style: normal;
}
.device-edit-actions .btn-d {
  color: var(--danger);
  border-color: var(--danger);
}

/* 高亮联动 */
@keyframes anchorPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(62, 156, 71, 0);
  }
  35% {
    box-shadow: 0 0 0 5px rgba(62, 156, 71, 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(62, 156, 71, 0);
  }
}
.hl-target {
  animation: anchorPulse 1.5s ease-out 2;
  border-radius: 12px;
  position: relative;
  z-index: 6;
  outline: 2px solid rgba(62, 156, 71, 0.85);
  outline-offset: 2px;
}

/* 计步 / 图表 */
.ring {
  width: 168px;
  height: 168px;
  margin: 18px auto 6px;
  position: relative;
}
.ring svg {
  transform: rotate(-90deg);
}
.ring .rv {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring .rv b {
  font-size: 32px;
  letter-spacing: 0.5px;
}
.ring .rv span {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 3px;
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 132px;
  padding: 10px 4px 0;
}
.bars .b {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.bars .b i {
  width: 100%;
  max-width: 22px;
  background: linear-gradient(180deg, var(--g-300), var(--g-500));
  border-radius: 5px 5px 0 0;
  display: block;
}
.bars .b span {
  font-size: 10.5px;
  color: var(--ink-4);
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.cal .cd {
  aspect-ratio: 1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: #f4f7f9;
  color: var(--ink-3);
}
.cal .cd.hd {
  background: none;
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 600;
}
.cal .cd.has {
  background: var(--g-100);
  color: var(--g-700);
  font-weight: 700;
}
.cal .cd.on {
  background: var(--g-500);
  color: #fff;
  font-weight: 700;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
}
.gallery .ph {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #dde5e0;
  position: relative;
}
.gallery .ph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.gallery .ph span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: #fff;
  font-size: 10px;
  padding: 10px 6px 4px;
}

.badge-n {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
}
.tbar .t-item {
  position: relative;
}
.tbar .t-item .tdot {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid #fff;
}

.mh-search {
  padding: 8px 16px 0;
  background: #fff;
}
.mh-search input {
  width: 100%;
  height: 40px;
  border: 1px solid #e2e8e4;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
}
.mh-map {
  height: 58%;
  min-height: 280px;
}
.ov-sheet {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 8px 16px 12px;
  box-shadow: 0 -4px 16px rgba(20, 40, 28, 0.08);
}
.ov-sheet .grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d5ddd7;
  margin: 4px auto 12px;
}
.ov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ov-cell {
  background: #f4f8f5;
  border-radius: 12px;
  padding: 12px;
}
.ov-cell b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1c2b22;
}
.ov-cell span {
  font-size: 11px;
  color: #5a6b62;
}
.ov-links {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: nowrap;
}
.ov-links button {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 2px solid var(--g-700);
  border-radius: 12px;
  background: #fff;
  color: var(--g-700);
  font-weight: 800;
  font-size: 15px;
}
.ov-links button.pri {
  background: var(--g-700);
  color: #fff;
  border-color: var(--g-700);
}
.ar-find {
  min-height: 520px;
  background: #0f1a14;
  color: #fff;
  text-align: center;
  padding-top: 72px;
}
.ar-compass {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 60px;
  background: rgba(62, 156, 71, 0.2);
  display: grid;
  place-items: center;
  color: #7dffa0;
}
.ar-dist {
  font-size: 40px;
  font-weight: 800;
  margin-top: 16px;
}
.ar-hint {
  font-size: 13px;
  color: #9bb0a2;
  margin-top: 6px;
}
.lg-links {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  color: #3e9c47;
  font-weight: 600;
}
.lg-super {
  margin-top: 18px;
  font-size: 12px;
  color: #8a9199;
  cursor: pointer;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 8px 0 16px;
}
.cal-d {
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #eef2ef;
  color: #1c2b22;
  font-weight: 600;
}
.cal-d.off {
  color: #b0b8b3;
  background: #f4f6f5;
}
.cal-d.on {
  background: #e8f5ee;
  color: #1f8a4c;
}
.track-range-page{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--page)}
.track-range-calendar{flex:none;background:#fff;padding:6px 14px 12px;border-bottom:1px solid var(--line)}
.track-range-month{height:48px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.track-range-month>div{text-align:center;display:flex;flex-direction:column;gap:2px}
.track-range-month b{font-size:16px}
.track-range-month span{font-size:11px;color:var(--ink-4)}
.track-range-month-btn{width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink);display:grid;place-items:center}
.track-range-month-btn:hover{background:var(--fill)}
.track-range-month-btn:focus-visible,.track-range-grid .cal-d:focus-visible,.track-range-row:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:-2px}
.track-range-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:2px 0 4px}
.track-range-weekdays span{height:24px;display:grid;place-items:center;font-size:11px;color:var(--ink-4)}
.track-range-grid{gap:4px;margin:0}
.cal-range-pad{height:44px}
.track-range-grid .cal-d{position:relative;height:44px;border-radius:9px;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.track-range-grid .cal-day-number{position:relative;z-index:2}
.track-range-grid .cal-track-dot{position:absolute;z-index:2;left:50%;bottom:5px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--g-500)}
.track-range-grid .cal-d.in-range{background:var(--g-100);color:var(--g-900);border-radius:6px}
.track-range-grid .cal-d.range-start,.track-range-grid .cal-d.range-end,.track-range-grid .cal-d.range-single{background:var(--g-700);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--g-700) 24%,transparent)}
.track-range-grid .cal-d.range-start:not(.range-single){border-radius:12px 6px 6px 12px}
.track-range-grid .cal-d.range-end:not(.range-single){border-radius:6px 12px 12px 6px}
.track-range-grid .cal-d.range-single{border-radius:12px}
.track-range-fields{flex:none;margin:10px 14px 8px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-1)}
.track-range-row{width:100%;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.track-range-row:last-of-type{border-bottom:0}
.track-range-row:hover{background:var(--g-050)}
.track-range-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.track-range-copy small{font-size:11px;color:var(--ink-4);line-height:1.3}
.track-range-copy strong{margin-top:3px;display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.35;font-weight:750;white-space:nowrap}
.track-range-copy strong time{color:var(--g-700);font-variant-numeric:tabular-nums}
.track-range-copy strong.is-empty{color:var(--ink-4);font-size:13px;font-weight:650}
.track-range-chevron{width:36px;height:36px;flex:none;border-radius:10px;background:var(--page);color:var(--ink-4);display:grid;place-items:center}
.track-range-row:hover .track-range-chevron{background:var(--g-100);color:var(--g-700)}
.track-range-error{margin:0;padding:8px 12px 9px;background:var(--danger-100);color:var(--danger);font-size:11.5px;line-height:1.4}
.track-range-limit{margin:0;padding:8px 12px 9px;background:var(--page);color:var(--ink-4);font-size:11.5px;line-height:1.4}
.track-range-action{margin-top:auto;flex-shrink:0;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.track-range-action .btn{min-height:48px}
.track-range-action .btn:disabled{opacity:.5;cursor:not-allowed}
.track-datetime-sheet{display:flex;flex-direction:column;background:#fff;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.track-datetime-head{height:58px;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;border-bottom:1px solid var(--line);padding:0 8px}
.track-datetime-head button{height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink-4);font-size:15px}
.track-datetime-head button.confirm{color:var(--g-700);font-weight:800}
.track-datetime-head button:hover{background:var(--fill)}
.track-datetime-head strong{text-align:center;font-size:14px;color:var(--ink-2)}
.track-datetime-wheel{position:relative;height:220px;display:grid;grid-template-columns:1.35fr repeat(4,1fr);padding:0 10px;overflow:hidden;background:#fff}
.track-datetime-wheel:before{content:"";position:absolute;left:10px;right:10px;top:88px;height:44px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);pointer-events:none;z-index:2}
.track-datetime-wheel label{position:relative;z-index:1;min-width:0}
.track-datetime-wheel select{width:100%;height:220px;border:0;outline:0;background:transparent;color:var(--ink-5);font:500 17px var(--app-font);font-variant-numeric:tabular-nums;text-align:center;overflow-y:auto;scrollbar-width:none;padding:0;appearance:none;-webkit-appearance:none}
.track-datetime-wheel select::-webkit-scrollbar{display:none}
.track-datetime-wheel option{height:44px;padding:10px 0;background:#fff;color:var(--ink-5);text-align:center}
.track-datetime-wheel option:checked{background:#fff;color:var(--ink);font-weight:800;font-size:19px}
.track-datetime-wheel select:focus-visible{outline:2px solid color-mix(in srgb,var(--g-500) 24%,transparent);outline-offset:-2px;border-radius:8px}
.heat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-height: 160px;
  margin: 12px 0;
}
.heat-grid i {
  display: block;
  min-height: 36px;
  border-radius: 6px;
}
.heat-grid.sm i {
  min-height: 18px;
}


*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#edf1f5;color:#1a1f1c;font-family:"Segoe UI",system-ui,-apple-system,"Microsoft YaHei",sans-serif}button{font:inherit}.lab-app{min-height:100vh;display:flex;flex-direction:column}.lab-top{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#fff;border-bottom:1px solid #e3e8ee;position:sticky;top:0;z-index:100}.lab-brand,.lab-actions,.lab-editions{display:flex;align-items:center;gap:10px}.lab-brand img{width:34px;height:34px;border-radius:9px}.lab-brand b{font-size:17px}.lab-brand span,.lab-status{color:#5a6b62;font-size:12px}.lab-button,.lab-editions button,.lab-screen,.lab-module,.lab-flow-btn,.lab-step-btn{min-height:44px;border:1px solid #d6dde3;background:#fff;color:#1a1f1c;border-radius:10px;padding:0 13px;cursor:pointer;font-weight:650}.lab-button:hover,.lab-editions button:hover,.lab-screen:hover,.lab-module:hover,.lab-flow-btn:hover,.lab-step-btn:hover{background:#f1f8f2;border-color:#7bc085}.lab-button:focus-visible,.lab-editions button:focus-visible,.lab-screen:focus-visible,.lab-module:focus-visible,.lab-flow-btn:focus-visible,.lab-step-btn:focus-visible{outline:3px solid rgba(62,156,71,.3);outline-offset:2px}.lab-editions button{min-height:36px;padding:0 12px;font-size:12px}.lab-editions button.on,.lab-module.on,.lab-screen.on,.lab-flow-btn.on{background:#2f7a38;border-color:#2f7a38;color:#fff}.lab-main{flex:1;display:grid;grid-template-columns:246px minmax(435px,1fr) 290px;gap:18px;padding:18px;min-height:0}.lab-panel{background:#fff;border:1px solid #e3e8ee;border-radius:16px;box-shadow:0 6px 20px rgba(16,24,40,.06);min-height:0}.lab-nav{padding:15px;overflow:auto;max-height:878px}.lab-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2f7a38;font-weight:800;margin-bottom:9px}.lab-nav h2,.lab-info h2{font-size:20px;margin:0 0 7px}.lab-copy{font-size:13px;line-height:1.65;color:#5a6b62;margin:0 0 14px}.lab-module-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}.lab-module{padding:8px 6px;font-size:12px;line-height:1.25}.lab-screens{display:flex;flex-direction:column;gap:6px}.lab-screen{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:0 10px;font-size:13px}.lab-screen small{font-size:10px;color:#8a9199}.lab-screen.on small{color:rgba(255,255,255,.76)}.lab-stage{display:flex;align-items:flex-start;justify-content:center;padding:12px;min-width:0;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 20%,#ffffff 0,#f7f9fb 44%,#edf1f5 100%)}.lab-phone-slot{width:399px;height:836px;flex:none;position:relative}.lab-info{padding:17px;overflow:auto;max-height:878px}.lab-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:999px;background:#e6f4ea;color:#1f5b27;font-size:11px;font-weight:800;margin:0 5px 6px 0}.lab-meta{display:grid;gap:9px;margin:16px 0}.lab-meta div{padding:10px 0;border-top:1px solid #eef1f4}.lab-meta span{display:block;color:#8a9199;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}.lab-meta b{display:block;font-size:12px;line-height:1.5;font-weight:650}.lab-flows{display:flex;flex-direction:column;gap:7px}.lab-flow-btn{height:auto;min-height:46px;padding:9px 11px;text-align:left;font-size:12px;line-height:1.35}.lab-flow-card{margin-top:14px;padding:13px;border-radius:12px;background:#f1f8f2;border:1px solid #cbe7cf}.lab-flow-card[hidden]{display:none}.lab-flow-title{font-size:12px;color:#2f7a38;font-weight:800}.lab-flow-caption{font-size:13px;line-height:1.55;margin:7px 0}.lab-step-actions{display:flex;gap:7px}.lab-step-btn{flex:1;min-height:40px;font-size:12px}.lab-step-btn.pri{background:#2f7a38;border-color:#2f7a38;color:#fff}.lab-step-btn.pri:hover{background:#1f5b27}.lab-footnote{font-size:11px;line-height:1.55;color:#8a9199;margin-top:14px}.dlg-layer,.toast-layer{position:absolute;inset:0;pointer-events:none;z-index:70}.dlg-layer.show,.toast-layer.show{pointer-events:auto}
.map.mh-map[data-anchor="mapHomeMap"]>.map-ctrl[data-anchor="mapctrl"]{top:24px}.map.mh-map[data-anchor="mapHomeMap"]>.map-fence-entry{top:171px!important}.map.mh-map[data-anchor="mapHomeMap"]>.map-zoom.lift{bottom:14px}
.history-sheet-panel{height:330px;max-height:330px;overflow:hidden;overflow-anchor:none;display:flex;flex-direction:column}.history-sheet-panel>.grabber,.history-sheet-panel>.sp-head,.history-sheet-panel>.stats3{flex:none}.history-sheet-panel>.history-records{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:-8px;padding-right:8px}.history-sheet-panel>.history-records::-webkit-scrollbar{width:0}
.dev-group-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 12%,transparent);z-index:14}.dev-group-filter{position:relative;z-index:15;flex:none;padding:8px 14px;background:#fff}.dev-group-trigger{width:100%;min-height:46px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);padding:7px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}.dev-group-trigger:hover{border-color:var(--g-300);background:var(--g-050)}.dev-group-trigger:focus-visible,.dev-group-option:focus-visible,.dev-group-manage:focus-visible,.dev-group-searchbox input:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:2px}.dev-group-current{display:flex;flex-direction:column;min-width:0}.dev-group-current small{font-size:10px;color:var(--ink-4);line-height:1.2}.dev-group-current b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}.dev-group-count{display:flex;align-items:center;gap:5px;flex:none;font-size:11px;color:var(--ink-3)}.dev-group-count b{font-size:13px;color:var(--g-700)}.dev-group-popover{position:absolute;left:14px;right:14px;top:62px;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;z-index:16}.dev-group-searchbox{height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);color:var(--ink-4)}.dev-group-searchbox input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:14px;outline:0}.dev-group-options{max-height:208px;overflow-y:auto;overscroll-behavior:contain;padding:6px}.dev-group-options::-webkit-scrollbar{width:0}.dev-group-option{width:100%;min-height:48px;border:0;border-radius:9px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:7px 10px;text-align:left;cursor:pointer}.dev-group-option:hover{background:var(--g-050)}.dev-group-option.on{background:var(--g-100);color:var(--g-900)}.dev-group-option span{display:flex;flex-direction:column;min-width:0}.dev-group-option b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dev-group-option small{font-size:11px;color:var(--ink-4);margin-top:2px}.dev-group-empty{padding:22px 12px;text-align:center;color:var(--ink-4);font-size:13px}.dev-group-manage{width:100%;min-height:48px;border:0;border-top:1px solid var(--line);background:#fff;color:var(--g-700);display:flex;align-items:center;gap:8px;padding:0 14px;font-weight:700;cursor:pointer}.dev-group-manage span{flex:1;text-align:left}.dev-group-manage:hover{background:var(--g-050)}
.dev-terminal-search{flex:none;margin:10px 14px 8px;min-height:44px;height:auto;border:1px solid var(--line-2);border-radius:12px;background:var(--fill);display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:9px 12px;color:var(--ink-4);box-shadow:none}.dev-terminal-search svg{display:block;flex:0 0 18px;align-self:center;transform:translateY(1px)}.dev-terminal-search input{display:block;flex:1;width:auto;height:auto;min-width:0;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;line-height:20px;outline:0}.dev-terminal-search input::placeholder{color:var(--ink-4);opacity:1}.dev-terminal-search:focus-within{border-color:var(--g-500);background:#fff;color:var(--g-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-500) 18%,transparent)}

.herd-select-summary{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 2px 8px}.herd-select-summary span{display:flex;flex-direction:column;min-width:0}.herd-select-summary b{font-size:13px;line-height:1.35}.herd-select-summary small{font-size:10.5px;line-height:1.35;color:var(--ink-4);margin-top:2px}.herd-select-count{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:999px;background:var(--g-100);color:var(--g-900);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}.herd-device-row{min-height:58px;display:flex;align-items:stretch;border-bottom:1px solid var(--line)}.herd-device-row:last-child{border-bottom:0}.herd-device-toggle{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 2px;cursor:pointer}.herd-device-toggle input{position:absolute;left:2px;top:50%;width:22px;height:22px;margin:0;transform:translateY(-50%);opacity:0;pointer-events:none}.herd-device-check{width:22px;height:22px;flex:none;border:1.5px solid var(--line-2);border-radius:7px;background:var(--page);color:var(--page);display:grid;place-items:center;transition:background .15s ease,border-color .15s ease}.herd-device-check svg{width:14px;height:14px}.herd-device-toggle input:checked+.herd-device-check{background:var(--g-500);border-color:var(--g-500)}.herd-device-toggle input:focus-visible+.herd-device-check{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:2px}.herd-device-copy{display:flex;flex-direction:column;min-width:0}.herd-device-copy b{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.herd-device-copy small{font-size:11px;line-height:1.35;color:var(--ink-4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.herd-device-row.is-disabled .herd-device-toggle{cursor:not-allowed}.herd-device-row.is-disabled .herd-device-check,.herd-device-row.is-disabled .herd-device-copy{opacity:.42}.herd-detail-btn{width:44px;min-height:44px;flex:none;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;border-radius:10px}.herd-detail-btn:hover{background:var(--g-050);color:var(--g-700)}.herd-detail-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:-3px}.herd-map-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;min-width:174px;padding:10px 14px;border-radius:12px;background:var(--page);box-shadow:var(--sh-2);color:var(--ink-3);font-size:12px;font-weight:700;text-align:center}.history-sheet-panel>.herd-select-summary{flex:none}
@media(max-width:1100px){.lab-main{grid-template-columns:220px minmax(420px,1fr)}.lab-info{display:none}}
@media(max-width:760px){.lab-top{height:auto;min-height:64px;padding:10px 14px;gap:10px;align-items:flex-start}.lab-brand span,.lab-status{display:none}.lab-actions{flex-direction:column;align-items:flex-end;gap:6px}.lab-main{display:block;padding:10px}.lab-nav{max-height:none;margin-bottom:10px;padding:12px}.lab-nav h2,.lab-copy{display:none}.lab-module-list{display:flex;overflow-x:auto;padding-bottom:4px;margin-bottom:9px}.lab-module{flex:0 0 auto;padding:8px 11px}.lab-screens{display:flex;flex-direction:row;overflow-x:auto}.lab-screen{flex:0 0 auto;min-width:116px}.lab-stage{padding:8px;min-height:704px}.lab-phone-slot{width:327px;height:686px}.lab-phone-slot .phone{transform:scale(.82);transform-origin:top left}}

/* 批量指令下发：终端列表局部增强 */
.command-select-nav .nb-title{left:72px;right:108px;font-size:17px;display:flex;flex-direction:column;gap:1px;line-height:1.08}.command-select-nav .nb-title small{font-size:10px;font-weight:600;color:var(--ink-4);letter-spacing:0}.nbar .nb-text{min-width:54px;height:40px;padding:0 2px;border:0;background:transparent;color:var(--g-700);font-size:13px;font-weight:700;z-index:3;border-radius:9px}.nbar .nb-text.right{min-width:92px;text-align:right}.nbar .nb-text:hover{background:var(--g-050)}.nbar .nb-text:focus-visible,.nbar .nb-btn:focus-visible,.dev-refresh-btn:focus-visible,.command-actionbar .btn:focus-visible,.batch-sheet-actions .btn:focus-visible,.command-check:focus-visible,.batch-command-item:focus-visible,.batch-option:focus-visible,.hold-confirm:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 26%,transparent);outline-offset:1px}.dev-search-row{display:flex;align-items:center;gap:8px;padding:10px 14px 4px;flex:none}.dev-search-row .dev-terminal-search{flex:1;min-width:0;margin:0}.dev-refresh-btn{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink-2);padding:0}.dev-refresh-btn:hover{border-color:var(--g-500);color:var(--g-700);background:var(--g-050)}.command-device-row{transition:border-color .16s,background .16s,transform .16s}.command-device-row.selecting{cursor:pointer}.command-device-row.selected{border:1px solid var(--g-500);background:var(--g-050)}.command-check{width:44px;height:48px;margin:-2px -8px -2px -6px;display:grid;place-items:center;flex:none;border:0;background:transparent;padding:0}.command-check span{width:23px;height:23px;border:1.7px solid var(--line-2);border-radius:7px;background:#fff;color:#fff;display:grid;place-items:center}.command-check.on span{border-color:var(--g-700);background:var(--g-700)}.command-actionbar{background:#fff;border-top:1px solid var(--line);padding-bottom:12px}.batch-sheet-head{min-height:66px;padding:12px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:38px 1fr 38px;align-items:center}.batch-sheet-head>button{width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--ink);display:grid;place-items:center}.batch-sheet-head>button:hover{background:var(--fill)}.batch-sheet-head>div{text-align:center;display:flex;flex-direction:column;line-height:1.2}.batch-sheet-head b{font-size:17px}.batch-sheet-head small{margin-top:4px;color:var(--ink-4);font-size:11.5px}.batch-sheet-scroll{max-height:470px;overflow:auto;padding-bottom:2px}.batch-command-group .sh-sec{text-transform:none;letter-spacing:.02em;background:var(--page)}.batch-command-item{width:100%;min-height:58px;padding:9px 16px;border:0;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:11px;color:var(--ink);text-align:left}.batch-command-item:hover{background:var(--fill)}.batch-command-item.danger{color:var(--danger)}.batch-command-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:var(--ink-2);flex:none}.batch-command-item.danger .batch-command-icon{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 32%,var(--line))}.batch-command-copy{flex:1;display:flex;flex-direction:column;min-width:0}.batch-command-copy b{font-size:15px}.batch-command-copy small{color:var(--ink-4);font-size:11.5px;margin-top:2px}.batch-param-body{padding:12px 16px 6px}.batch-option{width:100%;min-height:50px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;gap:12px;text-align:left;padding:0 4px}.batch-radio{width:22px;height:22px;border-radius:50%;border:1.7px solid var(--line-2);display:grid;place-items:center;flex:none}.batch-option.on{color:var(--g-700)}.batch-option.on .batch-radio{border-color:var(--g-700)}.batch-option.on .batch-radio i{width:12px;height:12px;border-radius:50%;background:var(--g-700)}.batch-param-body p,.batch-confirm-body>p{margin:14px 0 8px;color:var(--ink-3);font-size:12.5px;line-height:1.55}.batch-custom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3)}.batch-custom>div{height:42px;display:flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;background:#fff;padding-right:10px}.batch-custom input{width:76px;height:40px;border:0;background:transparent;text-align:center;font:700 15px var(--app-font);color:var(--ink);outline:0}.batch-custom em{font-style:normal;color:var(--ink-4);font-size:12px}.batch-sheet-actions{display:flex;gap:10px;padding:10px 14px 12px;border-top:1px solid var(--line);background:#fff}.batch-sheet-actions .btn{flex:1;height:48px;font-size:14px}.batch-sheet-actions.single{display:block}.batch-confirm-body{padding:16px}.batch-command-summary{padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--page);display:flex;align-items:center;justify-content:space-between;gap:16px}.batch-command-summary span{font-size:12px;color:var(--ink-4)}.batch-command-summary b{font-size:14px;text-align:right}.batch-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.batch-check-grid>div{padding:12px 8px;border:1px solid var(--line);border-radius:11px;text-align:center;background:#fff}.batch-check-grid span{display:block;font-size:11px;color:var(--ink-4)}.batch-check-grid b{display:block;margin-top:3px;font-size:18px;font-variant-numeric:tabular-nums}.danger-solid{background:var(--danger);border-color:var(--danger)}.batch-risk-body,.batch-result-body{text-align:center;padding:24px 22px 18px}.batch-risk-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--danger-100);color:var(--danger)}.batch-risk-body h3,.batch-result-body h3{margin:0;font-size:19px}.batch-risk-body p,.batch-result-body p{margin:8px auto 0;color:var(--ink-3);font-size:13px;line-height:1.6;max-width:30ch}.hold-confirm{position:relative;overflow:hidden;width:100%;height:50px;border:0;border-radius:12px;background:var(--danger);color:#fff;font-weight:800}.hold-confirm:before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:color-mix(in srgb,var(--ink) 18%,transparent)}.hold-confirm.holding:before{width:100%;transition:width 1s linear}.hold-confirm span{position:relative;z-index:1}.batch-result-mark{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--g-100);color:var(--g-700)}.batch-result-body>small{display:block;margin-top:16px;color:var(--ink-4);font-size:11.5px;line-height:1.5}.dlg-sheet .sh-cancel:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 26%,transparent);outline-offset:-3px}


/* 围栏绑定设备：搜索、分组下拉与跨组多选（仅作用于 FR-DLG-19） */
.fence-device-picker{position:relative;display:flex;flex-direction:column;max-height:min(76vh,610px);background:var(--page)}
.fence-device-head{flex:none;padding:18px 16px 10px;border-bottom:1px solid var(--line)}
.fence-device-head .sh-ttl{padding:0;text-align:left;border:0}
.fence-device-head small{display:block;margin-top:4px;color:var(--ink-4);font-size:11.5px;line-height:1.45}
.fence-device-search{flex:none;display:flex;align-items:center;gap:9px;margin:12px 14px 8px;padding:0 12px;min-height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--page);color:var(--ink-4)}
.fence-device-search:focus-within{border-color:var(--g-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-500) 18%,transparent)}
.fence-device-search input{width:100%;height:42px;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px;min-width:0}
.fence-device-search input::placeholder{color:var(--ink-4)}
.fence-device-group-filter{padding:0 14px 10px;background:var(--page);z-index:26}
.fence-device-group-filter .dev-group-popover{top:54px}
.fence-device-group-backdrop{z-index:25}
.fence-device-summary{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 14px 8px;padding:9px 11px;border-radius:10px;background:var(--g-050);color:var(--g-700);font-size:11.5px;font-weight:700}
.fence-device-summary span:last-child{color:var(--ink-4);font-weight:600;text-align:right}
.fence-device-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.fence-device-row{width:100%;min-height:62px;display:flex;align-items:center;gap:11px;padding:9px 16px;border:0;border-bottom:1px solid var(--line);background:var(--page);color:var(--ink);text-align:left}
.fence-device-row:hover{background:var(--fill)}
.fence-device-row.on{background:var(--g-050)}
.fence-device-check{width:23px;height:23px;flex:none;display:grid;place-items:center;border:1.7px solid var(--line-2);border-radius:7px;background:var(--page);color:var(--page)}
.fence-device-row.on .fence-device-check{border-color:var(--g-700);background:var(--g-700)}
.fence-device-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.fence-device-copy b{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fence-device-copy small{margin-top:3px;color:var(--ink-4);font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fence-device-outside{flex:none;color:var(--warning);font-size:10.5px;font-weight:700}
.fence-device-empty{padding:32px 20px;color:var(--ink-4);font-size:13px;line-height:1.6;text-align:center}
.fence-device-footer{flex:none;padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--page)}
.fence-device-done{width:100%;min-height:46px;border:1px solid var(--g-700);border-radius:12px;background:var(--g-700);color:var(--page);font-weight:750}
.fence-device-done:hover{background:var(--g-900);border-color:var(--g-900)}
.fence-device-done:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:2px}


/* 围栏牛群统计：三态筛选 + 纯设备列表（无复选框）。 */
.fence-stats-map{height:236px;min-height:236px;flex:none}
.fence-stats-sheet{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 14px 14px}
.fence-stats-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.fence-stats-filter button{min-height:58px;border:1px solid var(--line);border-radius:11px;background:var(--fill);color:var(--ink-3);padding:8px 10px;text-align:left}
.fence-stats-filter button b{display:block;color:var(--ink);font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums}
.fence-stats-filter button span{display:block;margin-top:5px;font-size:11px;font-weight:650}
.fence-stats-filter button.on{border-color:var(--g-700);background:var(--g-050);color:var(--g-700);box-shadow:0 0 0 1px color-mix(in srgb,var(--g-700) 18%,transparent)}
.fence-stats-filter button.on b{color:var(--g-700)}
.fence-stats-filter button:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:2px}
.fence-stats-search{display:flex;align-items:center;gap:9px;min-height:42px;margin-bottom:8px;padding:0 11px;border:1px solid var(--line-2);border-radius:11px;background:var(--page);color:var(--ink-4)}
.fence-stats-search:focus-within{border-color:var(--g-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-500) 18%,transparent)}
.fence-stats-search input{width:100%;height:40px;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;min-width:0}
.fence-stats-group{padding:0 0 8px;z-index:28}
.fence-stats-group .dev-group-popover{top:54px;left:0;right:0}
.fence-stats-list{margin-inline:-14px;border-top:1px solid var(--line)}
.fence-stats-row{width:100%;min-height:62px;display:flex;align-items:center;gap:11px;padding:9px 16px;border:0;border-bottom:1px solid var(--line);background:var(--page);color:var(--ink);text-align:left}
.fence-stats-row:hover{background:var(--fill)}
.fence-stats-row:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:-3px}
.fence-stats-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--g-500);box-shadow:0 0 0 4px var(--g-050)}
.fence-stats-dot.offline{background:var(--ink-4);box-shadow:0 0 0 4px var(--fill)}
.fence-stats-dot.alert{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 10%,transparent)}
.fence-stats-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.fence-stats-copy b{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fence-stats-copy small{margin-top:3px;color:var(--ink-4);font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fence-stats-state{flex:none;font-size:10.5px;font-weight:750;color:var(--g-700)}
.fence-stats-state.offline{color:var(--ink-4)}
.fence-stats-state.alert{color:var(--danger)}
.fence-stats-empty{padding:28px 18px;color:var(--ink-4);font-size:12px;line-height:1.6;text-align:center}
.fence-card-main{cursor:pointer;border-radius:10px}
.fence-card-main:focus-visible{outline:3px solid color-mix(in srgb,var(--g-500) 28%,transparent);outline-offset:3px}

/* 目标告警卡片结构：标题/状态、描述、设备号、备注与时间行分开展示。 */
.alert-record-card { padding: 16px; }
.alert-record-card .ac-top { display: flex; align-items: flex-start; gap: 8px; }
.alert-record-copy { flex: 1 1 auto; min-width: 0; }
.alert-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.alert-record-head .ac-ttl { flex: 1 1 auto; margin: 0; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.alert-record-state { flex: none; padding: 4px 10px; border-radius: 8px; background: var(--line); color: var(--ink-4); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.alert-record-state.open { background: var(--danger-100); color: var(--danger-d); }
.alert-record-card .ac-desc { display: block; margin-top: 6px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.alert-record-device { margin-top: 5px; color: var(--ink-3); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.alert-record-note { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--g-050); }
.alert-record-note-label { display: block; margin-bottom: 4px; color: var(--g-700); font-size: 12px; font-weight: 600; line-height: 1.4; }
.alert-record-note p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.alert-record-card .ac-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alert-record-card .ac-time { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-4); font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.alert-record-card .ac-time svg { flex: none; }
.alert-record-card .alert-history-entry { color: var(--g-700); min-width: 44px; min-height: 44px; margin: -8px 0; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.alert-record-card .alert-history-entry svg { width: 17px; height: 17px; }

/* 告警历史局部样式：不影响其他页面与共享令牌。 */
.alert-foot-actions { display:flex; align-items:center; gap:6px; flex:none; }
.alert-history-entry { min-height:44px; min-width:54px; margin:-8px 0; padding:0 4px 0 8px; border:0; border-radius:8px; background:transparent; color:var(--g-700); display:inline-flex; align-items:center; justify-content:center; gap:1px; font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.alert-history-entry svg { width:14px; height:14px; }
.alert-history-entry:hover,.alert-history-entry:active { background:var(--g-050); color:var(--g-900); }
.alert-history-entry:focus-visible { outline:2px solid var(--g-700); outline-offset:1px; }
.alert-history-view h2,.alert-history-view h3 { margin:0; font-size:16px; line-height:1.5; color:var(--ink); }
.alert-history-view p { margin:6px 0 0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; color:var(--ink-2); }
.alert-history-view .ah-caption { font-size:12px; color:var(--ink-3); }
.alert-history-view .ah-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.alert-history-view .ah-heading h3 { min-width:0; overflow-wrap:anywhere; }
.alert-history-view .ah-status { flex:none; border:1px solid var(--line-2); background:var(--page); color:var(--ink); padding:4px 8px; border-radius:6px; font-size:12px; }
.alert-history-view .ah-content { margin-top:14px; }
.alert-history-view .ah-content>span,.alert-history-view dt { color:var(--ink-3); font-size:12px; }
.alert-history-view dl { margin:14px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.alert-history-view .ah-field { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px; align-items:baseline; margin:7px 0; }
.alert-history-view dd { margin:0; font-size:12px; line-height:1.6; font-variant-numeric:tabular-nums; color:var(--ink); overflow-wrap:anywhere; }

/* Single-device date selection; scoped to preserve other screens. */
:root { --hist-date-gap:8px; --hist-date-pad:16px; --hist-date-touch:44px; --hist-date-type:16px; --hist-date-title:20px; --hist-date-radius:8px; }
.hist-date-page{flex:1;min-height:0;overflow-y:auto;padding:var(--hist-date-pad);background:var(--page);--od-gap:24px;font-size:var(--hist-date-type);line-height:1.5;color:var(--ink)}
.hist-date-context{--od-gap:8px;overflow-wrap:anywhere}.hist-date-context>span{color:var(--ink-3)}
.hist-date-calendar{background:#fff;padding:var(--hist-date-pad);border-radius:var(--hist-date-radius);--od-gap:16px}
.hist-date-month h2{font-size:var(--hist-date-title);text-align:center;margin:0;line-height:1.5}
.hist-date-month button{display:grid;place-items:center;flex:none;width:var(--hist-date-touch);min-height:var(--hist-date-touch);border:0;background:var(--g-050);color:var(--g-900);border-radius:var(--hist-date-radius);cursor:pointer}
.hist-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--hist-date-gap)}
.hist-date-week{display:block;text-align:center;color:var(--ink-3);font-size:var(--hist-date-type)}
.hist-date-day{place-items:center;min-height:var(--hist-date-touch);padding:0;border:0;background:#fff;color:var(--ink);border-radius:var(--hist-date-radius);font:inherit;cursor:pointer}
.hist-date-day[aria-pressed="true"]{background:var(--g-700);color:#fff;font-weight:700}
.hist-date-page button:focus-visible,.hist-date-actions button:focus-visible,.hist-date-empty button:focus-visible{outline:3px solid var(--g-900);outline-offset:2px}
.hist-date-actions{--od-gap:8px;flex:none}.hist-date-actions .btn{min-height:var(--hist-date-touch);padding:0 12px}
.hist-date-empty{--od-gap:8px;padding:16px 0;color:var(--ink-3);font-size:var(--hist-date-type);line-height:1.5}
.hist-date-empty .btn{align-self:flex-start;min-height:var(--hist-date-touch)}
.play-bar .pb-btn:disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover){.hist-date-day:not([aria-pressed="true"]):hover,.hist-date-month button:hover{background:var(--g-100);color:var(--g-900)}}

/* Date availability mirrors the track-calendar reference; querying stays unchanged. */
:root{--hist-track-dot:4px;--hist-track-muted:#637069;--hist-track-bg:#F3F6F4;--hist-track-accent:#23833B}
.hist-date-calendar{padding:8px;border-radius:0;--od-gap:8px}
.hist-date-month button{background:transparent;color:var(--g-700)}
.hist-date-month h2{font-size:var(--hist-date-type)}
.hist-month-heading{--od-gap:4px;text-align:center}
.hist-track-legend{--od-gap:8px;justify-content:center;color:var(--ink-3);font-size:12px;line-height:1.5}
.hist-track-dot{display:block;flex:none;width:var(--hist-track-dot);height:var(--hist-track-dot);border-radius:50%;background:var(--hist-track-accent)}
.hist-date-day{grid-template-rows:1fr 8px;gap:0;padding:4px 0;background:var(--hist-track-bg);color:var(--hist-track-muted)}
.hist-date-day.has-track{background:var(--g-100);color:var(--g-900);font-weight:600}
.hist-track-slot{display:flex!important;justify-content:center;align-items:center;min-height:8px}
.hist-date-day[aria-pressed="true"]{background:var(--g-700);color:#fff;font-weight:700}
.hist-date-day[aria-pressed="true"] .hist-track-dot{background:var(--g-900);box-shadow:0 0 0 2px #fff}
@media(hover:hover){.hist-date-day:not([aria-pressed="true"]):hover{background:var(--g-100);color:var(--g-900)}}

/* Shared group bottom sheet: scoped to group selection only. */
:root{--group-sheet-enter:240ms;--group-sheet-exit:160ms;--group-sheet-gap:16px;--group-sheet-touch:44px}
.dlg-layer.group-selection-layer{display:grid;grid-template-rows:minmax(0,1fr) auto}
.group-selection-layer>.dlg-mask{grid-area:1/1/3/2}
.group-selection-layer>.group-selection-sheet{position:relative;inset:auto;grid-area:2/1;min-height:0;max-height:84%;max-height:min(84dvh,640px);width:100%;z-index:1;display:flex;flex-direction:column;padding-bottom:var(--phone-safe-bottom,24px);animation:groupSheetIn var(--group-sheet-enter) ease-out both}
.group-selection-head{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--line);flex:none}
.group-selection-head h2{flex:1;min-width:0;margin:0;font-size:18px;line-height:1.5;text-align:center;color:var(--ink)}
.group-selection-back,.group-selection-spacer{display:flex;align-items:center;justify-content:center;min-width:var(--group-sheet-touch);min-height:var(--group-sheet-touch);flex:none}
.group-selection-back{background:transparent;border:0;color:var(--g-700);cursor:pointer;font-size:16px}
.group-selection-spacer{visibility:hidden}
.group-selection-search{display:grid;gap:8px;padding:16px;flex:none;font-size:16px}
.group-selection-search .dev-group-searchbox{display:flex;align-items:center;gap:8px;margin:0;min-height:44px;padding:8px 12px;border:1px solid var(--ink-4);border-radius:8px;background:#fff}
.group-selection-search input{font-size:16px;min-width:0;width:100%;border:0;background:transparent}
.group-selection-search .dev-group-searchbox:focus-within{border-color:var(--g-700);outline:1px solid var(--g-700)}
.group-selection-options{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px;max-height:none}
.group-selection-options .dev-group-option{display:flex;min-height:60px;width:100%;cursor:pointer;margin-bottom:8px}
.group-selection-options .dev-group-option>span{display:grid;gap:4px;min-width:0;text-align:left}
.group-selection-options b{font-size:16px;white-space:normal;overflow-wrap:anywhere}
.group-selection-options small{display:block;white-space:nowrap}
/* Group hierarchy: scoped tokens and normal-flow labels preserve the shared sheet. */
:root{--group-row-pad:12px;--group-row-height:72px;--group-row-check:20px;--group-level-gap:8px;--group-level-font:14px;--group-level-radius:4px;--group-level-pad:4px;--group-level-color:var(--g-700);--group-level-bg:var(--g-50)}
.group-selection-options .dev-group-option{gap:var(--group-level-gap);padding:var(--group-row-pad);min-height:var(--group-row-height);align-items:center}
.group-selection-options .group-option-path{display:block;font-size:var(--group-level-font);line-height:1.5;color:var(--ink-3);white-space:normal;overflow-wrap:anywhere;margin:0}
.group-selection-options .dev-group-option>.group-option-tail{display:flex;flex-direction:row;align-items:center;gap:var(--group-level-gap);flex:none}
.group-selection-options .group-option-count{display:block;font-size:var(--group-level-font);line-height:1.5;color:var(--ink-3);white-space:nowrap;margin:0}
.group-selection-options .group-option-check{display:flex;flex-direction:row;align-items:center;justify-content:center;flex:none;width:var(--group-row-check);height:var(--group-row-check);color:var(--g-700)}
.group-selection-options .group-option-title{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:var(--group-level-gap);min-width:0;text-align:left}
.group-selection-options .group-option-title>b{display:block;min-width:0;max-width:100%;line-height:1.5;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-align:left}
.group-selection-options .group-level-badge{display:block;flex:none;white-space:nowrap;font-size:var(--group-level-font);font-weight:600;line-height:1.5;color:var(--group-level-color);background:var(--group-level-bg);border:1px solid currentColor;border-radius:var(--group-level-radius);padding:0 var(--group-level-pad)}
.group-selection-options .dev-group-option>svg{flex:none}

.group-selection-sheet [hidden]{display:none!important}
.group-selection-sheet button:focus-visible{outline:2px solid var(--g-700);outline-offset:2px}
.group-selection-sheet #groupSheetSearch,.group-selection-sheet #groupSheetSearch:focus,.group-selection-sheet #groupSheetSearch:focus-visible{border:0;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.group-selection-sheet .dev-group-manage{min-height:44px;flex:none;margin:0 16px;font-size:16px;width:auto;cursor:pointer}
.group-selection-empty{padding:24px 8px;text-align:center;font-size:16px;line-height:1.6;color:var(--ink-3)}
.group-selection-layer.group-selection-exit>.group-selection-sheet{animation:groupSheetOut var(--group-sheet-exit) ease-in both}
@keyframes groupSheetIn{from{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes groupSheetOut{to{transform:translateY(24px);opacity:0}}
@media(hover:hover){.group-selection-back:hover{background:var(--g-50)}.group-selection-options .dev-group-option:hover{background:var(--g-50)}}
@media(prefers-reduced-motion:reduce){.group-selection-layer>.group-selection-sheet,.group-selection-layer.group-selection-exit>.group-selection-sheet{animation:none}}


/* Fixed-centre fence editor: local geometry draft, no radius modal. */
:root { --fence-gap:8px; --fence-pad:16px; --fence-control:44px; --fence-text:16px; --fence-small:12px; --fence-radius:12px; --fence-feedback:180ms; }
.fence-edit-map { min-height:192px; touch-action:none; cursor:grab; isolation:isolate; }
.fence-edit-map.is-dragging { cursor:grabbing; }
.fence-edit-map:focus-visible { outline:3px solid var(--g-700); outline-offset:-3px; }
.fence-edit-map .map-art { pointer-events:none; background-repeat:repeat; }
.fence-edit-map .map-art.osm { filter:saturate(.72) hue-rotate(18deg) brightness(1.28); }
.fence-edit-map .map-art.topo { filter:sepia(.38) saturate(1.15) hue-rotate(-12deg) contrast(1.05); }
.fence-edit-map .map-art > svg { visibility:hidden; }
.fence-edit-map .fence-circle,.fence-edit-map .fence-tag { pointer-events:none; }
.fence-edit-map [hidden] { display:none!important; }
.fence-edit-map .fence-center-hit { pointer-events:none; cursor:inherit; }
.fence-edit-map .fence-center-hit::before { background:#fff; border-color:var(--g-700); }
.fence-edit-map .fence-map-tip { right:var(--fence-pad); left:var(--fence-pad); font-size:14px; line-height:1.5; }
.fence-edit-map .map-ctrl { top:72px; left:8px; right:auto; gap:8px; }
.fence-edit-map .map-btn,.fence-edit-map .map-zoom button { width:var(--fence-control); height:var(--fence-control); min-height:var(--fence-control); display:grid; place-items:center; }
.fence-edit-map .map-zoom { right:8px; bottom:32px; display:flex; flex-direction:column; gap:8px; background:transparent; box-shadow:none; }
.fence-edit-map .map-zoom button { border-radius:8px; background:#fff; border:1px solid var(--line-2); }
.fence-sheet.sheet-panel { display:flex; flex-direction:column; flex:none; max-height:56%; padding:8px var(--fence-pad) 0; overflow:hidden; }
.fence-sheet .grabber { flex:none; }
.fence-radius-block { flex:none; padding:0; --od-gap:var(--fence-gap); }
.fence-radius-block label { font-size:var(--fence-text); font-weight:500; color:var(--ink-2); }
.fence-radius-block .od-row { --od-gap:var(--fence-gap); }
.fence-radius-block input { display:block; width:100%; min-width:0; height:var(--fence-control); padding:8px 12px; border:0; border-radius:var(--fence-radius); font:inherit; font-size:var(--fence-text); color:var(--ink); background:#fff; }
.fence-input-wrap { border:1px solid var(--line-2); border-radius:var(--fence-radius); background:#fff; --od-gap:0; }
.fence-input-wrap:has(input[aria-invalid="true"]) { border-color:var(--danger-d); }
.fence-unit { display:block; padding-right:12px; color:var(--ink-3); font-size:var(--fence-text); }
.fence-sheet .fence-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fence-radius-block input[aria-invalid="true"] { border-color:var(--danger-d); }
.fence-radius-block .fence-confirm { display:block; min-width:64px; min-height:var(--fence-control); padding:8px 12px; color:var(--g-700); background:#fff; border:1px solid var(--g-700); border-radius:8px; font-size:var(--fence-text); font-weight:600; cursor:pointer; white-space:nowrap; }
.fence-editor-help,.fence-editor-status { display:block; font-size:var(--fence-small); line-height:1.5; color:var(--ink-3); margin:0; overflow-wrap:anywhere; }
.fence-editor-error { display:block; color:#B42318; font-size:14px; line-height:1.5; margin:0; }
.fence-editor-error:empty { display:none; }

.fence-panel-content { flex:1 1 auto; min-height:0; --od-gap:16px; padding:0 0 8px; }
.fence-panel-content > * { flex-shrink:0; }
.fence-identity { --od-gap:4px; }
.fence-section-label { display:block; margin:0; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-3); }
.fence-name-title { display:block; width:100%; min-height:32px; margin:0; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-size:20px; line-height:1.4; font-weight:700; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.fence-alert-section { --od-gap:8px; }
.fence-type-options { --od-cols:3; --od-gap:8px; }
.fence-type-option { --od-gap:4px; min-height:60px; padding:8px 4px; border:1px solid var(--line-2); border-radius:8px; background:#fff; color:var(--ink-2); font:inherit; cursor:pointer; text-align:center; }
.fence-type-option.is-selected { border-color:var(--g-700); background:var(--g-050); color:var(--g-700); }
.fence-type-name { font-size:14px; font-weight:600; line-height:1.5; }
.fence-type-helper { font-size:12px; font-weight:400; line-height:1.5; color:var(--ink-3); }
.fence-bind-row { min-height:44px; padding:8px 0; border:0; border-top:1px solid var(--line-2); border-radius:0; background:none; color:var(--ink-2); font:inherit; font-size:16px; text-align:left; cursor:pointer; --od-gap:8px; }
.fence-bound-count { color:var(--ink-3); font-size:14px; }
@media (hover:hover) { .fence-type-option:hover { border-color:var(--g-700); } .fence-bind-row:hover,.fence-name-title:hover { color:var(--g-700); } }

.fence-save-row { display:flex; flex:none; gap:12px; padding:12px 0 16px; background:#fff; border-top:1px solid var(--line-2); }
.fence-save-row .btn { font-size:var(--fence-text); min-height:48px; }
.fence-save-row .btn-p { background:var(--g-700); }
.fence-save-row .btn:disabled { opacity:.48; cursor:not-allowed; }
.fence-sheet button:focus-visible,.fence-sheet input:focus-visible,.fence-edit-map button:focus-visible { outline:3px solid var(--g-700); outline-offset:3px; }
@media (hover:hover) { .fence-radius-block .fence-confirm:hover { background:var(--g-050); color:var(--g-900); } .fence-edit-map button:hover { background:var(--g-100); } }
@media (max-width:375px) { .fence-sheet.sheet-panel { padding-inline:12px; } }
@media (prefers-reduced-motion:reduce) { .fence-edit-map *,.fence-sheet * { transition:none!important; animation:none!important; } }


/* Group management only: hierarchy and independent combined filters. */
:root{--group-management-gap:8px;--group-management-pad:12px;--group-management-control:48px;--group-management-text:16px;--group-management-small:14px;--group-management-radius:8px}
.group-management [hidden]{display:none!important}
.group-management-filters{--od-gap:var(--group-management-gap)}
.group-management-filters label{font-size:var(--group-management-small);color:var(--ink-2);line-height:1.5}
.group-management-filters input,.group-management-filters select{display:block;width:100%;min-width:0;min-height:var(--group-management-control);border:1px solid var(--line-2);border-radius:var(--group-management-radius);background:#fff;color:var(--ink);padding:var(--group-management-gap);font:inherit;font-size:var(--group-management-text)}
.group-management-filters input::placeholder{color:var(--ink-3)}
.group-management-clear{align-self:flex-end;display:block;min-height:var(--group-management-control);padding:0 var(--group-management-pad);border:0;background:transparent;color:var(--g-700);font-size:var(--group-management-small);cursor:pointer}
.group-management-title{--od-gap:var(--group-management-gap);font-size:var(--group-management-text);line-height:1.5}
.group-management-title b{display:block;overflow-wrap:anywhere;max-width:100%}
.group-management-badge{display:block;border:1px solid currentColor;border-radius:var(--group-level-radius);padding:0 var(--group-level-pad);color:var(--g-700);background:var(--g-050);font-size:var(--group-management-small)}
.group-management-path{display:block;color:var(--ink-3);font-size:var(--group-management-small);line-height:1.5;overflow-wrap:anywhere}
.group-management .row-acts{gap:var(--group-management-gap)}
.group-management .row-acts button{display:block;flex:1;min-height:var(--group-management-control);border:0;background:transparent;font:inherit;color:var(--g-700);cursor:pointer}
.group-management .row-acts button.del{color:var(--danger-d)}
.group-management-empty{padding:var(--group-management-pad);font-size:var(--group-management-text);line-height:1.5;text-align:center;color:var(--ink-3)}
.group-management button:focus-visible,.group-management input:focus-visible,.group-management select:focus-visible{outline:2px solid var(--g-700);outline-offset:2px}
@media(hover:hover){.group-management button:hover{background:var(--g-050)}}

/* Mobile refinement: compact, wrapping toolbar and native touch picker. */
.group-management-filters{margin-top:0}
.group-management-toolbar{--od-gap:var(--group-management-gap);align-items:center}
.group-management-level{flex:1 1 160px;min-width:0;--od-gap:var(--group-management-gap)}
.group-management-filters .group-management-level select{width:auto;min-width:0;cursor:pointer}
.group-management-clear{flex:0 0 auto;align-self:center;white-space:nowrap;border-radius:var(--group-management-radius)}
.group-management-clear:disabled{color:var(--ink-3);background:transparent;cursor:default}
.group-management-result{margin:var(--group-management-gap) var(--group-management-pad);color:var(--ink-3);font-size:var(--group-management-small);line-height:1.5}
.group-management button,.group-management select{touch-action:manipulation}
.group-management button:not(:disabled):active{background:var(--g-100)}

/* Group list reserves a separate footer track; no overlay or guessed list padding. */
.group-management-content{flex:1;min-height:0;height:auto;overflow:hidden;background:var(--page)}
.group-management-content>.group-management{min-height:0;margin:0;padding-bottom:var(--group-management-gap)}
.group-management-summary{padding:0 var(--group-management-pad);min-height:48px;--od-gap:8px;color:var(--ink-3);font-size:14px}
.group-management-summary p{margin:0;line-height:1.5}
.group-management-footer{padding:12px 16px max(20px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line-2)}
.group-management-footer>.btn{display:block;width:100%;min-height:48px;background:var(--g-700);font-size:16px;cursor:pointer}
.group-management-filter-trigger{position:relative;min-width:48px;min-height:48px}
.group-filter-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--g-700)}
.group-filter-panel{margin:0;max-height:100%;overflow:auto;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.group-filter-heading{border-bottom:1px solid var(--line-2);--od-gap:8px}
.group-filter-heading h2{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
.group-filter-close{display:block;min-width:48px;min-height:48px;border:0;background:transparent;color:var(--ink-3);font-size:16px;cursor:pointer}
.group-filter-panel .alert-filter-label{font-size:16px;line-height:1.5}
.group-filter-panel .dlg-input{min-height:48px;font-size:16px}
.group-filter-panel .alert-filter-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.group-filter-panel .alert-filter-type{min-height:48px;padding:0 4px;font-size:14px;white-space:nowrap;cursor:pointer}
.group-filter-panel .alert-filter-actions{gap:8px}
.group-filter-panel .btn{font-size:16px;cursor:pointer}
.group-filter-panel button:focus-visible,.group-management-footer button:focus-visible,.group-management-filter-trigger:focus-visible{outline:2px solid var(--g-700);outline-offset:2px}

.group-management-content.group-management-no-summary{grid-template-rows:minmax(0,1fr) auto}

/* Scoped group operation dialogs: readable fields and inline errors. */
.group-name-dialog{margin:0;max-height:100%;overflow-y:auto}
.group-name-dialog .dbody{--od-gap:8px;text-align:left}
.group-name-dialog label,.group-name-dialog .dlg-input{font-size:16px;line-height:1.5}
.group-name-dialog .dlg-input{display:block;width:100%;min-height:48px}
.group-name-dialog small{font-size:14px;color:var(--ink-3);line-height:1.5}
.group-name-dialog #groupNameError{margin:0;font-size:14px;line-height:1.5;color:var(--danger-d)}
.group-name-dialog [hidden]{display:none!important}
.group-name-dialog .dm{overflow-wrap:anywhere}
.group-name-dialog .da button{min-height:48px;font-size:16px;cursor:pointer}
.group-name-dialog button:focus-visible,.group-name-dialog input:focus-visible{outline:2px solid var(--g-700);outline-offset:2px}

/* ============ 指令记录：批次列表 + 设备结果详情 ============ */
.command-record-list {
  padding: 9px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.command-record-card {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh-1);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.command-record-card:hover {
  background: #fafdfd;
}
.command-record-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 30%, transparent);
  outline-offset: 2px;
}
.command-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.command-record-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.command-record-summary {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-record-time {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1.45;
}
.cmd-time-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--ink-4);
}
.command-detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
}
.command-task-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--g-500) 16%, var(--line));
  background: var(--g-050);
  box-shadow: none;
  padding: 11px 12px;
}
.command-task-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--g-100);
  color: var(--g-700);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.command-task-meta {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.command-device-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.command-device-card {
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.command-device-number {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.command-device-meta {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.command-device-actions {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.command-device-actions .btn {
  position: relative;
  height: 36px;
  min-height: 36px;
  min-width: 96px;
  padding: 0 14px;
  border-radius: 10px;
  border-width: 1.2px;
  font-size: 12.5px;
}
.command-device-actions .btn::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.command-detail-actions {
  border-top: 1px solid var(--line);
}
.command-detail-actions .btn {
  min-height: 50px;
  font-size: 15px;
}

/* ============ 整群轨迹：设备选择区基础样式 ============ */
.herd-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom, 0px));
}
.herd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.herd-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.herd-group-trigger {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.herd-group-trigger:hover {
  border-color: var(--g-300);
  background: var(--g-050);
}
.herd-group-trigger:focus-visible,
.herd-device-search input:focus-visible,
.herd-picker-option input:focus-visible,
.herd-detail-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-500) 26%, transparent);
  outline-offset: 2px;
}
.herd-group-label {
  flex: none;
  color: var(--ink-4);
  font-size: 12px;
}
.herd-group-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.herd-group-trigger svg {
  flex: none;
  color: var(--ink-3);
}
.herd-picker-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.herd-device-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-4);
}
.herd-device-search:focus-within {
  border-color: var(--g-500);
}
.herd-device-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: 0;
}
.herd-picker-list {
  flex: 1;
  min-height: 0;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
}
.herd-picker-list::-webkit-scrollbar {
  width: 0;
}
.herd-picker-option {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 2px;
  cursor: pointer;
}
.herd-picker-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--g-500);
}
.herd-picker-option .od-field {
  min-width: 0;
}
.herd-picker-option b {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.herd-picker-option small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.herd-picker-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13px;
}
/* 整群历史轨迹：顶部时间入口 + 页面内设备选择（设备区不超过屏幕 40%） */
.herd-time-selector {
  margin-bottom: 6px;
}
.herd-inline-panel {
  height: 40%;
  max-height: 40%;
  min-height: 0;
  padding: 5px 12px max(8px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.herd-inline-panel > .grabber {
  flex: none;
  margin: 0 auto 4px;
}
.herd-picker-inline {
  flex: 1;
  min-height: 0;
  gap: 5px;
  padding: 0;
}
.herd-picker-inline .herd-picker-header {
  flex: none;
}
.herd-picker-inline .herd-group-trigger {
  min-height: 36px;
  padding: 0 9px;
  border-radius: 9px;
}
.herd-picker-inline .herd-group-label {
  font-size: 10px;
}
.herd-picker-inline .herd-group-name {
  font-size: 12px;
}
.herd-picker-inline .herd-picker-controls {
  flex: none;
  gap: 3px;
}
.herd-picker-inline .herd-device-search {
  min-height: 36px;
  padding: 0 9px;
  border-radius: 9px;
  gap: 6px;
}
.herd-picker-inline .herd-device-search input {
  font-size: 12px;
}
.herd-picker-inline .herd-picker-list {
  max-height: none;
}
.herd-picker-inline .herd-device-row {
  min-height: 44px;
}
.herd-picker-inline .herd-picker-option {
  gap: 8px;
  padding: 5px 6px 5px 1px;
}
.herd-picker-inline .herd-picker-option input {
  width: 18px;
  height: 18px;
}
.herd-picker-inline .herd-picker-option b {
  font-size: 13px;
  line-height: 1.25;
}
.herd-picker-inline .herd-picker-option small {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.25;
}
.herd-picker-inline .herd-detail-btn {
  width: 36px;
  min-height: 36px;
}
.herd-picker-inline .herd-device-row.is-disabled .herd-picker-option {
  opacity: .45;
  cursor: not-allowed;
}
.herd-picker-inline .herd-picker-empty {
  padding: 14px 8px;
  font-size: 11px;
}