/* ============================================================
   BMS 网页上位机 - 本地样式
   复刻 bms_ui.html 的深色科技风（主色 #00e5ff），离线可用
   ============================================================ */

/* ---------- 基础与背景 ---------- */
html { color-scheme: dark; }
body {
  background:
    radial-gradient(1100px 480px at 15% -10%, rgba(0,229,255,.14), transparent 60%),
    radial-gradient(900px 420px at 95% 5%, rgba(0,136,255,.10), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(0,229,255,.06), transparent 65%),
    #020617;
  background-attachment: fixed;
  color: #e2e8f0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- 布局工具类（bms_ui 同款） ---------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.pointer-events-none { pointer-events: none; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-sm { max-width: 24rem; }
.max-w-6xl { max-width: 72rem; }
.min-h-screen { min-height: 100vh; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.p-5 { padding: 1.25rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt-4 { padding-top: 1rem; }
.pb-2 { padding-bottom: .5rem; }
.pr-4 { padding-right: 1rem; }
.mt-1 { margin-top: .25rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.my-3 { margin-top: .75rem; margin-bottom: .75rem; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: .5rem; }
.mx-1 { margin-left: .25rem; margin-right: .25rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-1\.5 > * + * { margin-top: .375rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.overflow-x-auto { overflow-x: auto; }
.w-full { width: 100%; }
.h-auto { height: auto; }
.hidden { display: none !important; }

/* 云端版：首屏渲染前就收起本地连接入口，避免“先显示再消失”的闪烁 */
html.cloud [data-cloud-hide] { display: none !important; }
html.cloud .remote-local-hint { display: none !important; }
html.cloud #guide-cloud-sub { display: block !important; }
/* 云端版：首页不再有连接方式按钮，登录表单直接嵌在标题下方 */
html.cloud .guide-cards { display: none !important; }

/* 云端版登录页：深色科技背景 + 左侧品牌 + 右侧白色登录卡 */
html.cloud body { background: linear-gradient(40deg, #080a0f 0%, #001120 100%); }
html.cloud body { margin: 0; }   /* 去掉浏览器默认 8px 外边距，登录页整屏不出现滚动条 */
html.cloud .grid-bg { display: none; }
html.cloud body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 520px at 12% 16%, rgba(22, 119, 255, .26), transparent 70%),
    radial-gradient(640px 460px at 86% 84%, rgba(0, 194, 255, .16), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(2, 8, 18, .72) 100%);
}
html.cloud #guide-screen .guide-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  /* 行序：弹性留白 / 标题 / 口号 / 状态栏 / 弹性留白 / 错误 / 版权
     上下弹性留白按剩余空间分配，标题与口号紧凑成组并落在状态栏正上方 */
  grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  column-gap: 3.5rem;
  row-gap: .4rem;
  align-items: center;
  box-sizing: border-box;   /* 让 100vh 含内边距，整屏不出现多余滚动 */
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: left;
}
/* 云端登录页不显示大字 BMS 标志及其发光，标题与口号直接作为左侧品牌区 */
html.cloud #guide-screen .guide-logo { display: none !important; }

/* 云端登录页右上角：返回门户首页（桌面版隐藏） */
.guide-home-link { display: none; }
html.cloud #guide-screen { position: relative; }
html.cloud .guide-home-link {
  display: inline-flex; align-items: center; gap: .45rem;
  /* 绝对定位在 .guide-inner 内：right = 容器内边距 → 右边缘与登录卡片右对齐 */
  position: absolute; top: 22px; right: 2rem; z-index: 5;
  padding: .5rem 1.05rem;
  border: 1px solid rgba(96, 190, 255, .28);
  border-radius: 999px;
  background: rgba(10, 24, 42, .55);
  color: #a8c8e8; font-size: .84rem; letter-spacing: .03em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .16s, border-color .16s, background .16s, transform .16s;
}
html.cloud .guide-home-link:hover {
  color: #fff;
  border-color: rgba(64, 208, 255, .6);
  background: rgba(20, 45, 75, .78);
  transform: translateX(-2px);
}
html.cloud .guide-home-link svg { flex: none; }

html.cloud #guide-title {
  grid-column: 1; grid-row: 2;
  font-size: 2.45rem; line-height: 1.32; margin: 0 0 .2rem; color: #fff;
}
/* 云端登录页左上角品牌 LOGO（门户首页同款：徽标 + 天津特能 / 物联平台） */
.guide-brand-corner { display: none; }
html.cloud .guide-brand-corner {
  display: flex; align-items: center; gap: 14px;
  /* 绝对定位在 .guide-inner 内：left = 容器内边距 → 左边缘与标题左对齐 */
  position: absolute; top: 22px; left: 2rem; z-index: 5;
}
html.cloud .guide-brand-corner .brand-badge { --badge-size: 46px; }
html.cloud .guide-brand-corner .brand-name { font-size: 19px; color: #eaf7ff; }
html.cloud .guide-brand-corner .brand-sub { font-size: 10.5px; color: #9fd7ef; }
html.cloud #guide-cloud-sub {
  grid-column: 1; grid-row: 3;
  margin: 0; color: #67e8f9; font-size: .95rem;
  letter-spacing: .05em; line-height: 1.8;
}
html.cloud #guide-error { grid-column: 1; grid-row: 6; }
html.cloud .guide-divider { display: none; }
html.cloud .guide-hint {
  grid-column: 1 / -1; grid-row: 7;
  /* 撑满整行并在其中居中：上方加一条分割线，版权文字居中显示 */
  width: 100%; max-width: none; justify-self: stretch;
  margin-top: 1.2rem; padding-top: 1.05rem;
  border-top: 1px solid rgba(120, 180, 240, .14);
  color: #5c7392; font-size: .84rem; text-align: center;
}
html.cloud .remote-login-card {
  grid-column: 2;
  grid-row: 1 / 6;
  /* 站点未全局设置 border-box；卡片宽度需含内边距，否则会横向溢出 */
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0;
  padding: 2.3rem 2.1rem 2.1rem;
  background: linear-gradient(158deg, rgba(18, 36, 62, .93), rgba(7, 17, 31, .9));
  border: 1px solid rgba(96, 190, 255, .22);
  border-radius: 20px;
  box-shadow: 0 40px 90px rgba(0, 10, 24, .62), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #dbe9f8;
  will-change: transform;
}
/* 顶部渐变高光与扫描线，体现"设备面板"质感 */
html.cloud .remote-login-card::before {
  content: '';
  position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 220, 255, .85), transparent);
}
html.cloud .remote-login-card::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -30%; height: 26%;
  background: linear-gradient(180deg, transparent, rgba(64, 208, 255, .06) 45%, rgba(64, 208, 255, .13) 55%, transparent);
  animation: fx-sweep 7.5s ease-in-out infinite;
  pointer-events: none;
}
html.cloud .remote-card-title {
  display: block !important;
  color: #f2f9ff;
  font-size: 1.48rem;
  letter-spacing: .04em;
  text-align: left;
  margin: 0 0 .55rem;
  text-shadow: 0 0 24px rgba(64, 208, 255, .28);
}
html.cloud .remote-card-sub {
  color: #8dabcb;
  font-size: .85rem;
  text-align: left;
  margin: 0 0 1.8rem;
  line-height: 1.7;
}
html.cloud .remote-login-row { display: block; margin-top: 0; }
html.cloud .remote-login-row .remote-field { display: block; margin-bottom: 1rem; }
html.cloud .remote-field > span { color: #8dabcb; font-size: .8rem; letter-spacing: .04em; }
html.cloud .remote-input {
  background: rgba(5, 14, 27, .72);
  border: 1px solid rgba(96, 190, 255, .22);
  border-radius: 10px;
  color: #eaf6ff;
  padding: .72rem .9rem;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
html.cloud .remote-input::placeholder { color: #5b7794; }
html.cloud .remote-input:hover { border-color: rgba(96, 190, 255, .4); }
html.cloud .remote-input:focus {
  outline: none;
  background: rgba(6, 18, 34, .9);
  border-color: rgba(64, 208, 255, .78);
  box-shadow: 0 0 0 3px rgba(64, 208, 255, .13), 0 0 26px rgba(64, 208, 255, .2);
}
html.cloud .remote-login-btn {
  width: 100%;
  height: 2.95rem;
  min-width: 0;
  margin-top: .6rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgba(120, 220, 255, .4);
  background: linear-gradient(135deg, #1d6fe8, #22c3ff);
  color: #fff;
  box-shadow: 0 14px 34px rgba(20, 130, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
html.cloud .remote-login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 40px rgba(20, 130, 255, .44), inset 0 1px 0 rgba(255, 255, 255, .26);
}
html.cloud .remote-login-btn:active:not(:disabled) { transform: translateY(0); }
html.cloud .remote-login-btn:disabled { cursor: progress; opacity: .9; }
html.cloud .remote-login-btn:disabled::before {
  content: '';
  width: .9rem; height: .9rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: fx-spin .8s linear infinite;
}
html.cloud #remote-login-error {
  margin-top: .9rem;
  background: rgba(255, 86, 86, .1);
  border: 1px solid rgba(255, 120, 120, .38);
  color: #ffb9b9;
  border-radius: 10px;
}
@media (max-width: 980px) {
  html.cloud #guide-screen .guide-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 2rem;
    row-gap: .8rem;
    padding: 3rem 1.2rem;
    text-align: center;
  }
  html.cloud #guide-title,
  html.cloud #guide-cloud-sub,
  html.cloud .brand-rail,
  html.cloud #guide-error,
  html.cloud .guide-hint { grid-row: auto; }
  /* 窄屏：容器内边距为 1.2rem，绝对定位同步 */
  html.cloud .guide-brand-corner { top: 12px; left: 1.2rem; }
  html.cloud .guide-brand-corner .brand-badge { --badge-size: 38px; }
  html.cloud .guide-brand-corner .brand-name { font-size: 16px; }
  html.cloud .guide-brand-corner .brand-sub { font-size: 9px; }
  html.cloud .brand-rail { margin-top: .8rem; }
  html.cloud #guide-title { font-size: 1.9rem; }
  html.cloud .guide-home-link { top: 12px; right: 1.2rem; padding: .40rem .85rem; font-size: .78rem; }
  /* 窄屏：栅格项默认 min-width:auto 会被内容撑破容器，显式允许收缩 */
  html.cloud #guide-screen .guide-inner > * { min-width: 0; }
  html.cloud .brand-rail { grid-row: auto; }
  html.cloud .rail-status, html.cloud .rail-metrics { justify-content: center; }
  html.cloud .rail-metrics { gap: 1.6rem; }
  html.cloud .remote-login-card { grid-column: 1; grid-row: auto; width: 100%; max-width: 100%; }
  html.cloud .remote-card-title, html.cloud .remote-card-sub { text-align: center; }
}

/* ============================================================
   云端登录页视觉增强：数据流背景 / 玻璃登录卡 / 左栏状态区
   ============================================================ */
/* 这些元素只在云端登录页出现，桌面版默认全部收起 */
.login-fx, .brand-rail, .pass-toggle, .login-extras, .login-foot { display: none; }
/* 密码框容器：云端放显隐按钮，桌面版与原来保持一致的排版 */
.input-wrap { display: block; }
.caps-hint { display: none; }
html.cloud .caps-hint { display: block; }
html.cloud .login-fx {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
html.cloud #fx-canvas { display: block; width: 100%; height: 100%; }
html.cloud .fx-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  mix-blend-mode: screen;
}
html.cloud .fx-aurora-a {
  width: 46vw; height: 46vw; min-width: 360px; min-height: 360px;
  left: -8vw; top: -10vw;
  background: radial-gradient(circle, rgba(29, 111, 232, .55), transparent 66%);
  animation: fx-drift-a 22s ease-in-out infinite alternate;
}
html.cloud .fx-aurora-b {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  right: -6vw; bottom: -12vw;
  background: radial-gradient(circle, rgba(0, 214, 255, .4), transparent 68%);
  animation: fx-drift-b 26s ease-in-out infinite alternate;
}
/* 登录成功后不再保留登录页的动态背景与光晕（设备总览、监控页只留纯色底） */
html.cloud body:has(#guide-screen.hidden) .login-fx { display: none; }
html.cloud body:has(#guide-screen.hidden)::before { display: none; }

/* ---------- 左栏状态区 ---------- */
html.cloud .brand-rail { display: block; grid-column: 1; grid-row: 4; margin-top: 1.5rem; }
html.cloud .rail-status { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.15rem; }
html.cloud .rail-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .82rem; border-radius: 999px;
  background: rgba(64, 208, 255, .07);
  border: 1px solid rgba(64, 208, 255, .2);
  color: #9ed6ff; font-size: .78rem; letter-spacing: .03em;
}
html.cloud .rail-chip .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ee6a8;
  box-shadow: 0 0 0 3px rgba(46, 230, 168, .16);
  animation: fx-dot 2.6s ease-in-out infinite;
}
html.cloud .rail-chip:nth-child(2) .dot { background: #40d0ff; box-shadow: 0 0 0 3px rgba(64, 208, 255, .16); animation-delay: .6s; }
html.cloud .rail-clock { color: #7f9fbf; gap: .4rem; }
html.cloud .rail-clock b { color: #cfeeff; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .06em; }
html.cloud .rail-typing {
  min-height: 1.95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.02rem; letter-spacing: .02em; color: #dcefff;
}
html.cloud .rail-typing .caret {
  display: inline-block; width: 9px; height: 1.05em;
  margin-left: 3px; vertical-align: -2px; background: #40d0ff;
  animation: fx-caret 1.05s steps(1) infinite;
}
html.cloud .rail-metrics {
  display: flex; gap: 2.4rem; margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(120, 180, 240, .14);
}
html.cloud .rail-metrics b { display: block; font-size: 1.45rem; color: #fff; letter-spacing: .02em; }
html.cloud .rail-metrics span { color: #8dabcb; font-size: .78rem; }

/* ---------- 密码显隐 / 大写锁定 ---------- */
html.cloud .input-wrap { position: relative; display: block; }
html.cloud #remote-pass { padding-right: 2.7rem; }
html.cloud .pass-toggle {
  display: grid;
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; place-items: center;
  border: none; border-radius: 8px; background: transparent;
  color: #7f9fbf; cursor: pointer; transition: color .15s, background .15s;
}
html.cloud .pass-toggle:hover { color: #40d0ff; background: rgba(64, 208, 255, .1); }
html.cloud .pass-toggle .eye-off { display: none; }
html.cloud .pass-toggle.is-on .eye { display: none; }
html.cloud .pass-toggle.is-on .eye-off { display: block; }
html.cloud .caps-hint { display: block; margin-top: .4rem; color: #ffd479; font-size: .74rem; }

/* ---------- 记住账号 / 安全说明 / 卡片脚注 ---------- */
html.cloud .login-extras {
  display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .95rem;
}
html.cloud .remember {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #9fb8d4; font-size: .82rem; cursor: pointer; user-select: none;
}
html.cloud .remember input { width: 15px; height: 15px; accent-color: #22c3ff; cursor: pointer; }
html.cloud .secure-note {
  display: inline-flex; align-items: center; gap: .35rem;
  color: #6f92b5; font-size: .76rem;
}
html.cloud .login-foot {
  display: block;
  margin-top: 1.3rem; padding-top: 1.05rem;
  border-top: 1px solid rgba(120, 180, 240, .13);
  color: #6f92b5; font-size: .76rem; text-align: center;
}

/* ---------- 动效 ---------- */
@keyframes fx-sweep {
  0% { transform: translateY(-40%); opacity: 0; }
  14% { opacity: 1; }
  60% { opacity: .85; }
  100% { transform: translateY(460%); opacity: 0; }
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-dot {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes fx-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fx-drift-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes fx-drift-b {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  100% { transform: translate3d(-5vw, -4vh, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.cloud .fx-aurora,
  html.cloud .remote-login-card::after,
  html.cloud .rail-chip .dot,
  html.cloud .rail-typing .caret { animation: none !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 860px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 文字 ---------- */
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.tracking-wide { letter-spacing: .025em; }
.tracking-wider { letter-spacing: .05em; }
.tracking-widest { letter-spacing: .1em; }
.font-num { font-family: Consolas, "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, monospace; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-400 { color: #22d3ee; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-400 { color: #34d399; }
.text-green-400 { color: #4ade80; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-sky-300 { color: #7dd3fc; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-cy { color: #00e5ff; }
.text-cy-soft { color: #33ecff; }

/* ---------- 面板 ---------- */
.panel {
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: 1rem;
  background: rgba(15, 23, 42, .62);
  box-shadow: 0 0 32px rgba(0, 229, 255, .05), inset 0 1px 0 rgba(148, 163, 184, .08);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  position: relative;
  padding: .2rem 0 .5rem;
  margin: 0 0 .85rem;
  font-size: .85rem;
  letter-spacing: .14em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, .35);
}
.panel-title::before {
  content: '';
  width: .5rem;
  height: .5rem;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, .5);
  border-radius: 9999px;
}
.panel-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .16rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35) 70%, transparent);
  box-shadow: 0 0 3px rgba(255, 255, 255, .3);
}

/* 监控指标格（与微信小程序主页保持一致） */
.monitor-metric {
  min-height: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: .8rem .7rem .7rem;
  text-align: center;
  background: linear-gradient(180deg, #1e3052, #152339);
  border-radius: .9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.metric-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: .35rem;
}
.metric-icon-image {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}
.metric-name {
  min-width: 0;
  color: #cccccc;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.metric-value {
  min-height: 2rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15rem;
  margin-top: .5rem;
  color: #6ff0ff;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 700;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-num { text-shadow: 0 0 12px rgba(45, 226, 255, .35); }
.stat-unit, .rt-unit { color: #ffffff; font-size: 1.15rem; font-weight: 700; margin-left: .1rem; }
.rt-value.metric-value { margin-top: .4rem; }
.rt-rows { margin-top: .9rem; }
.rt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  min-height: 2.2rem;
  padding: 0 .3rem;
  border-bottom: 1px solid rgba(100, 116, 139, .28);
  font-size: .85rem;
}
.rt-row:last-child { border-bottom: 0; }
.rt-row.rt-pair { justify-content: flex-start; gap: 1rem; }
.rt-pair-item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .3rem; }
.rt-row-label { color: #94a3b8; font-size: .82rem; flex: 0 0 4.4rem; }
.rt-row-value {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  text-align: right;
  gap: .4rem;
  color: #33ecff;
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rt-row-value.warn { color: #fbbf24; }
.rt-row-value.idle, .rt-row-value.charging, .rt-row-value.discharging { color: #fbbf24; }
.rt-row-value.protection { color: #f87171; }
.rt-row-main { font-size: .95rem; }
.rt-row-sub { color: #94a3b8; font-size: .78rem; font-weight: 400; }
.glow-text { text-shadow: 0 0 18px rgba(0, 229, 255, .55); }

.soc-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.soc-battery {
  width: 108%;
  max-width: 42rem;
  margin-left: -4%;
  margin-right: -4%;
}
.soc-readout-value {
  fill: #fef3c7;
  font: 700 53px Consolas, "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, monospace;
}
.soc-readout-pct {
  fill: #00e5ff;
  font: 700 33px Consolas, "JetBrains Mono", monospace;
}
.soc-charge-hint {
  fill: #ef4444;
  font: 600 13px "Microsoft YaHei", "PingFang SC", sans-serif;
}
.soc-battery svg { display: block; }

.bat-liquid-layer { opacity: .88; }
.bat-liquid-base { opacity: 1; }
.bat-cell { fill: #142634; stroke: rgba(52, 80, 98, .95); stroke-width: 1.2px; }
.bat-cell.filled { fill: url(#batLiquid); }
.soc-battery.low .bat-cell.filled { fill: url(#batLowLiquid); }
.bat-segments { paint-order: stroke; }
.bat-wave { fill: rgba(207, 250, 254, .48); opacity: 0; }
.bat-wave-back { fill: rgba(14, 165, 233, .34); }
.bat-wave-back-2 { fill: rgba(14, 165, 233, .22); }
.bat-wave-front-2 { fill: rgba(207, 250, 254, .28); }
.bat-wave-glint {
  fill: none;
  stroke: rgba(224, 251, 255, .82);
  stroke-width: 1.15px;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(165, 243, 252, .8));
}
.bat-sweep { animation: sweep 3.2s ease-in-out infinite alternate; opacity: 1; }
.bat-ripple { display: none; }
.soc-battery.charging .bat-liquid-layer { opacity: 1; }
.soc-battery.charging .bat-wave { opacity: 1; }
.soc-battery.charging .bat-wave-back { animation: batWaterBack 6.4s linear infinite; }
.soc-battery.charging .bat-wave-back-2 { animation: batWaterBack 6.4s linear infinite -3.2s; }
.soc-battery.charging .bat-wave-front { animation: batWaterFront 4.8s linear infinite; }
.soc-battery.charging .bat-wave-front-2 { animation: batWaterFront 4.8s linear infinite -2.4s; }
.soc-battery.charging .bat-wave-glint { animation: batWaterGlint 2.4s ease-in-out infinite; opacity: 1; }
.soc-battery.charging .glow-text {
  color: #fef3c7;
  text-shadow: 0 0 12px rgba(251, 191, 36, .95), 0 0 26px rgba(245, 158, 11, .58);
}
.soc-battery.low .bat-liquid-base { fill: url(#batLowLiquid); }
.soc-battery.low .bat-wave { fill: rgba(255, 237, 213, .52); }
.soc-battery.low .bat-wave-back { fill: rgba(234, 88, 12, .42); }
.soc-battery.low .bat-shell {
  stroke: rgba(251, 113, 133, .92);
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, .8));
}
.soc-battery.low .glow-text {
  color: #fed7aa;
  text-shadow: 0 0 12px rgba(249, 115, 22, .95), 0 0 26px rgba(225, 29, 72, .58);
}
@keyframes batWaterFront {
  from { transform: translateX(0); }
  to { transform: translateX(-80px); }
}
@keyframes batWaterBack {
  from { transform: translateX(0); }
  to { transform: translateX(80px); }
}
@keyframes batWaterGlint {
  0%, 100% { transform: translateX(-4px); opacity: .35; }
  50% { transform: translateX(34px); opacity: .95; }
}

/* ---------- 充电水波纹（充电时启用） ---------- */
.bat-ripple {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 9rem;
  height: 9rem;
  margin: -4.5rem 0 0 -4.5rem;
  border: 2px solid rgba(0, 229, 255, .5);
  border-radius: 50%;
  transform: scale(.15);
  opacity: 0;
  pointer-events: none;
}
.soc-battery.charging .bat-ripple {
  animation: batRipple 2.4s ease-out infinite;
}
.soc-battery.charging .bat-ripple.r2 {
  animation-delay: 1.2s;
}
.soc-battery.charging .soc-charge-icon {
  animation: none;
}
@keyframes batRipple {
  0% { transform: scale(.15); opacity: .85; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes chargeIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.card {
  border-radius: .5rem;
  background: rgba(30, 41, 59, .40);
  border: 1px solid rgba(51, 65, 85, .55);
}
.bg-slate-800\/40 { background: rgba(30, 41, 59, .40); }

/* ---------- 动画 ---------- */
@keyframes sweep {
  from { transform: translateX(-150px); }
  to { transform: translateX(240px); }
}
@keyframes pingSoft {
  0% { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}
.led-ping { animation: none; }
@keyframes blinkYellow {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .12; }
}
.blink { animation: blinkYellow 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .bat-sweep, .led-ping, .blink,
  .conn-status-mode.offline,
  .soc-battery.charging .bat-ripple,
  .soc-battery.charging .soc-charge-icon { animation: none !important; }
  .soc-battery.charging .bat-wave,
  .soc-battery.charging .bat-wave-glint { animation: none !important; }
}
@media (max-width: 640px) {
  .soc-battery { width: 104%; margin-left: -2%; margin-right: -2%; }
}

/* ---------- 状态指示 ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid rgba(100, 116, 139, .4);
  background: rgba(100, 116, 139, .12);
  padding: .25rem .75rem;
  font-size: .75rem;
  color: #94a3b8;
}
.status-pill.ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .10); color: #6ee7b7; }
.status-pill.err { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .10); color: #fca5a5; }
.status-pill.warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .10); color: #fcd34d; }

/* 4G 固件升级面板 */
.ota-panel { margin-top: .9rem; padding: .9rem; border: 1px solid rgba(100, 116, 139, .28); border-radius: .6rem; background: rgba(15, 23, 42, .35); }
.ota-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
.ota-row input[type="file"] { flex: 1 1 240px; color: #cbd5e1; font-size: .85rem; }
.ota-bar-wrap { height: 10px; border-radius: 9999px; background: rgba(100, 116, 139, .25); overflow: hidden; }
.ota-bar { height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg, #38bdf8, #22c55e); transition: width .3s ease; }
.ota-status { margin-top: .5rem; font-size: .85rem; color: #cbd5e1; }
.ota-status.ok { color: #6ee7b7; }
.ota-status.err { color: #fca5a5; }
/* 升级面板标题行的"当前软件版本"值：比同行其它值稍大、绿色 */
.remote-loc-grid b.ota-curver-value { font-size: 1rem; font-weight: 700; color: #6ee7b7; }
/* 升级面板标题行：设备名 / 在线状态 / 当前软件版本 三个值字体颜色大小统一 */
.remote-loc-grid.ota-head-grid > div { padding: .38rem .7rem; }
.remote-loc-grid.ota-head-grid b { font-size: 1rem; font-weight: 700; color: #6ee7b7; }

/* 顶栏连接状态（微信小程序样式：电池ID | XXXXXXX | CAN/BLE/RS485 在线/离线） */
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: #00e5ff;
  white-space: nowrap;
  letter-spacing: .02em;
}
.conn-sep { color: rgba(0, 229, 255, .5); }
.conn-status-mode { font-weight: 600; }
.conn-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  vertical-align: middle;
}
.conn-signal i {
  display: block;
  width: 4px;
  border-radius: 1px;
  background: rgba(0, 229, 255, .22);
}
.conn-signal i:nth-child(1) { height: 5px; }
.conn-signal i:nth-child(2) { height: 8px; }
.conn-signal i:nth-child(3) { height: 11px; }
.conn-signal i:nth-child(4) { height: 14px; }
.conn-signal i.on {
  background: #00e5ff;
  box-shadow: 0 0 4px rgba(0, 229, 255, .65);
}
.conn-status-mode.online { color: #34d399; text-shadow: 0 0 10px rgba(52, 211, 153, .35); }
.conn-status-mode.offline {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, .35);
  animation: blinkRed 1s linear infinite;
}
@keyframes blinkRed {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .15; }
}
.conn-alert {
  color: #f87171;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(248, 113, 113, .4);
  animation: alertPulse 1.2s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .conn-alert { animation: none !important; }
}
.led { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; }
.led-green { background: #34d399; box-shadow: 0 0 8px #34d399; }
.led-amber { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.led-red { background: #f87171; box-shadow: 0 0 8px #f87171; }
.led-gray { background: #64748b; }
.led-cyan { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
.led-ping-wrap { position: relative; display: inline-flex; width: .75rem; height: .75rem; }
.led-ping-wrap .led-ping { position: absolute; inset: 0; border-radius: 9999px; }
.led-ping-wrap .led { position: relative; }

/* 单体均衡状态小标识：灰色=未均衡，红色=均衡中 */
.bal-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; background: #475569; margin-right: .35rem; vertical-align: middle; }
.bal-dot.on { background: #f87171; box-shadow: 0 0 6px #f87171; }

/* ---------- 按钮 / 表单 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .6rem;
  background: rgba(30, 41, 59, .55);
  color: #cbd5e1;
  font-size: .8rem;
  padding: .45rem .9rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: rgba(0, 229, 255, .45); color: #e2e8f0; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary {
  border-color: rgba(0, 229, 255, .55);
  background: rgba(0, 229, 255, .10);
  color: #33ecff;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 18px rgba(0, 229, 255, .25); }
.btn.active {
  border-color: rgba(0, 229, 255, .55);
  background: rgba(0, 229, 255, .10);
  color: #33ecff;
}
.func-btn {
  font-size: .95rem;
  padding: .85rem .5rem;
  border-radius: .7rem;
  justify-content: center;
  font-weight: 500;
}
.func-btn:hover:not(:disabled) {
  border-color: rgba(0, 229, 255, .55);
  color: #e2e8f0;
  box-shadow: 0 0 16px rgba(0, 229, 255, .15);
}
.btn-danger {
  border-color: rgba(248, 113, 113, .4);
  background: rgba(248, 113, 113, .08);
  color: #fca5a5;
}
.btn-red {
  border-color: rgba(248, 113, 113, .45);
  color: #f87171;
}
.btn-red:hover:not(:disabled) { border-color: rgba(248, 113, 113, .7); color: #fca5a5; box-shadow: 0 0 14px rgba(248, 113, 113, .2); }
.btn-sm { font-size: .7rem; padding: .25rem .6rem; border-radius: .45rem; }
.btn-lg { font-size: .9rem; padding: .55rem .9rem; border-radius: .6rem; }
.btn.btn-reconnect {
  border-color: #ef4444;
  background: rgba(30, 41, 59, .55);
  color: #f87171;
  font-weight: 600;
}
.btn.btn-reconnect:hover:not(:disabled) {
  border-color: #f87171;
  color: #fca5a5;
  box-shadow: 0 0 14px rgba(248, 113, 113, .25);
}

.select, .input {
  box-sizing: border-box;
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .6rem;
  color: #cbd5e1;
  font-size: .8rem;
  padding: .4rem .6rem;
  outline: none;
}
.select:focus, .input:focus { border-color: rgba(0, 229, 255, .55); }
.select option { background: #0f172a; }
.input { font-family: Consolas, monospace; width: 7.5rem; }

.checkbox { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: #94a3b8; cursor: pointer; }
.checkbox input { accent-color: #00e5ff; }

/* ---------- 传输页签 ---------- */
.transport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: 9999px;
  background: rgba(15, 23, 42, .55);
  color: #94a3b8;
  font-size: .8rem;
  padding: .4rem 1rem;
  cursor: pointer;
  transition: all .15s;
}
.tab-btn:hover { color: #e2e8f0; }
.tab-btn.active {
  border-color: rgba(0, 229, 255, .6);
  background: rgba(0, 229, 255, .10);
  color: #33ecff;
  box-shadow: 0 0 16px rgba(0, 229, 255, .15);
}
.transport-panel { margin-bottom: 1rem; }

/* ---------- 告警 ---------- */
.alarm-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: .5rem;
  background: rgba(30, 41, 59, .40);
  padding: .6rem .75rem;
  font-size: .8rem;
}
.alarm-row .alarm-label { margin-left: auto; font-size: .7rem; }
/* 遥测页告警指示两列：紧凑显示，超长省略 */
#tel-alarm-list .alarm-row { font-size: .72rem; padding: .45rem .5rem; gap: .4rem; }
#tel-alarm-list .alarm-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#tel-alarm-list .alarm-row .alarm-label { font-size: .66rem; }
.alarm-history-time { color: #94a3b8; font-family: Consolas, monospace; font-size: .72rem; }

/* ---------- 电芯表格 ---------- */
.cell-table { width: 100%; font-size: .8rem; border-collapse: collapse; }
.cell-table th {
  text-align: left;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  font-weight: 400;
  padding: .4rem .6rem .5rem;
}
#func-history .cell-table th {
  font-size: .78rem;
  color: #a5f3fc;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
}
.hist-table { table-layout: fixed; width: 100%; min-width: 1060px; }
.hist-table td { padding: .45rem .35rem; vertical-align: top; }
.cell-table td { padding: .45rem .6rem; border-top: 1px solid rgba(51, 65, 85, .55); white-space: nowrap; }
.hist-table td { white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.hist-table td.hist-mos, .hist-table td.hist-alarm { font-family: inherit; color: #e2e8f0; line-height: 1.45; }
.hist-table td.hist-alarm { font-size: .75rem; }
.hist-table td.hist-type { color: #fde047; font-family: Consolas, monospace; }
.hist-table td.hist-mos { color: #fde047; }
.hist-table td.hist-type.hist-blue, .hist-table td.hist-mos.hist-blue { color: #38bdf8; }
.hist-table td.hist-type.hist-purple, .hist-table td.hist-mos.hist-purple { color: #c084fc; }
.hist-table td.hist-type.hist-green, .hist-table td.hist-mos.hist-green { color: #34d399; }
#ota-choose, #ota-start {
  box-sizing: border-box;
  width: 9.5rem;
  height: 2.55rem;
}
.ota-choose-wrap {
  position: relative;
  display: inline-block;
  width: 9.5rem;
  height: 2.55rem;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  border-radius: .6rem;
}
.ota-file-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgba(0, 229, 255, .55);
  border-radius: .6rem;
  background: rgba(0, 229, 255, .10);
  color: transparent;
  cursor: pointer;
  font-size: .9rem;
}
.ota-file-input::file-selector-button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.ota-choose-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #33ecff;
  font-size: .9rem;
  white-space: nowrap;
}
.cell-table .num { font-family: Consolas, monospace; color: #94a3b8; font-variant-numeric: tabular-nums; }
.cell-table .volt { font-family: Consolas, monospace; color: #33ecff; font-variant-numeric: tabular-nums; }

/* 莱克定制协议页：协议解析卡片里的实时数值统一青色 */
#custom-parse .volt {
  color: #33ecff;
  font-family: Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
#custom-parse .custom-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin-top: .4rem;
}
.custom-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.4rem;
  padding: .32rem .5rem;
  background: rgba(0, 229, 255, .05);
  border: 1px solid rgba(0, 229, 255, .18);
  border-radius: .4rem;
}
.custom-metric-name { font-size: .68rem; color: #94a3b8; white-space: nowrap; }
.custom-metric-value { font-size: .92rem; color: #33ecff; }
.custom-metric-extra { font-size: .65rem; color: #fbbf24; margin-top: .1rem; }
.bar-bg { height: .35rem; border-radius: 9999px; background: rgba(51, 65, 85, .6); overflow: hidden; min-width: 4rem; }
.bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #0284c7, #00e5ff); }
.bar-fill-green { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #059669, #34d399); box-shadow: 0 0 12px rgba(52, 211, 153, .5); }

/* ---------- 数据曲线 ---------- */
.curve-wrap {
  position: relative;
  width: 100%;
  height: 520px;
  margin-top: .6rem;
}
#curve-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(2, 6, 23, .45);
  border: 1px solid rgba(51, 65, 85, .8);
  border-radius: .6rem;
}

/* ---------- 温度芯片 ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: 9999px;
  background: rgba(30, 41, 59, .4);
  padding: .25rem .6rem;
  font-size: .7rem;
  color: #94a3b8;
  font-family: Consolas, monospace;
}
.chip b { color: #67e8f9; font-weight: 500; }

/* ---------- 日志 ---------- */
.log-box {
  height: 15rem;
  overflow-y: auto;
  background: rgba(2, 6, 23, .65);
  border: 1px solid rgba(51, 65, 85, .8);
  border-radius: .6rem;
  padding: .6rem .75rem;
  font-family: Consolas, "JetBrains Mono", monospace;
  font-size: .72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}
.log-line .t { color: #475569; margin-right: .5rem; }
.log-line .dir { display: inline-block; width: 2.4rem; font-weight: 600; }
.log-line.tx .dir { color: #22d3ee; }
.log-line.tx { color: #a5f3fc; }
.log-line.rx .dir { color: #34d399; }
.log-line.rx { color: #a7f3d0; }
.log-line.evt { color: #94a3b8; }
.log-line.err { color: #fca5a5; }

/* ---------- 信息表格 ---------- */
.info-table { width: 100%; font-size: .8rem; border-collapse: collapse; }
.info-table td { padding: .42rem .5rem; border-top: 1px solid rgba(51, 65, 85, .55); }
.info-table td:first-child { color: #64748b; white-space: nowrap; }
.info-table td:last-child { text-align: right; font-family: Consolas, monospace; color: #cbd5e1; }
#info-version, #info-battery-id { color: #fcd34d; font-size: .95rem; }
#curr-dir, #tel-curr-dir { margin-top: .12rem; }
.prot-table { font-size: .72rem; }
.prot-table td { padding: .3rem .4rem; }

/* ---------- 其它 ---------- */
.divider { height: 1px; background: rgba(51, 65, 85, .8); margin: .75rem 0; }
.header-line {
  height: 1px;
  margin: .15rem 0 1.1rem;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .35), rgba(51, 65, 85, .9), rgba(0, 229, 255, .35), transparent);
}
#main-screen header h1 { line-height: 1.15; }
.note-text { font-size: .72rem; line-height: 1.6; color: #64748b; }
.kbd {
  border: 1px solid rgba(100, 116, 139, .5);
  border-radius: .3rem;
  background: rgba(30, 41, 59, .6);
  padding: 0 .35rem;
  font-family: Consolas, monospace;
  font-size: .7rem;
  color: #cbd5e1;
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, .5); }
::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, .9); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, .9); }

/* ---------- 引导页 ---------- */
.screen { min-height: 100vh; }
.guide-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 1rem 3rem;
  text-align: center;
}
.guide-logo {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  font-weight: 700;
  color: #00e5ff;
  background: rgba(0, 229, 255, .08);
  border: 2px solid rgba(0, 229, 255, .5);
  box-shadow: 0 0 44px rgba(0, 229, 255, .22), inset 0 0 26px rgba(0, 229, 255, .1);
  margin-bottom: 1.1rem;
}
/* ---------- 登录页品牌 LOGO（与门户首页左上角一致，深色底适配） ---------- */
/* 仅给读屏/脚本使用、视觉隐藏 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* 【力神能源】徽标：纯 CSS 绘制（蓝渐变圆角方块 + 白字），与首页同一套配色 */
.guide-brand-corner .brand-badge {
  --badge-size: 46px;
  flex: none;
  height: calc(var(--badge-size) * .974);
  border-radius: calc(var(--badge-size) * .168);
  min-width: calc(var(--badge-size) * 1.02);
  padding: 0 calc(var(--badge-size) * .19);
  font-size: calc(var(--badge-size) * .335);
  background: linear-gradient(180deg, #0aadeb 0%, #0180dc 52%, #0455cb 100%);
  color: #fff; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 8px 20px rgba(1, 128, 220, .38);
}
.guide-brand-corner .brand-lockup { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.guide-brand-corner .brand-name {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: #eaf7ff; letter-spacing: .26em; white-space: nowrap;
  margin-right: -.26em;                 /* 抵消末字后的字距，与下方对齐 */
}
.guide-brand-corner .brand-rule { height: 2px; border-radius: 2px; background: rgba(56, 189, 248, .9); }
.guide-brand-corner .brand-sub {
  display: flex; justify-content: space-between; gap: .1em;
  font-size: 14px; font-weight: 600; line-height: 1.15;
  color: #9fd7ef; white-space: nowrap;
}
.guide-brand-corner .brand-sub i { font-style: normal; }
.guide-title {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: #e2e8f0;
}
/* 云端版副标题（本地版不显示） */
.guide-cloud-sub {
  margin-top: .7rem;
  color: #67e8f9;
  font-size: .92rem;
  letter-spacing: .12em;
}
.guide-sub {
  margin-top: .6rem;
  max-width: 34rem;
  color: #94a3b8;
  font-size: .85rem;
  line-height: 1.7;
}
.big-btn {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid rgba(0, 229, 255, .6);
  border-radius: 9999px;
  background: rgba(0, 229, 255, .12);
  color: #33ecff;
  font-size: 1.05rem;
  font-weight: 500;
  padding: .9rem 2.4rem;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(0, 229, 255, .18);
  transition: all .18s;
}
.big-btn:hover { background: rgba(0, 229, 255, .2); box-shadow: 0 0 40px rgba(0, 229, 255, .35); transform: translateY(-1px); }
.guide-cards {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  max-width: 46rem;
  width: 100%;
}
@media (max-width: 760px) {
  .guide-cards { grid-template-columns: 1fr; }
}
.guide-card {
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: 1rem;
  background: rgba(15, 23, 42, .55);
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.guide-card:hover {
  border-color: rgba(0, 229, 255, .55);
  background: rgba(0, 229, 255, .06);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0, 229, 255, .12);
}
.guide-card .ic { font-size: 1.5rem; }
.guide-card h3 { font-size: 1rem; color: #33ecff; font-weight: 500; text-shadow: 0 0 12px rgba(0, 229, 255, .35); }
.guide-hint {
  margin-top: .2rem;
  font-size: .72rem;
  color: #475569;
  line-height: 1.8;
  max-width: 38rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.guide-copy { color: #64748b; white-space: nowrap; }
.guide-icp, .cloud-icp { color: #64748b; text-decoration: none; white-space: nowrap; }
.guide-icp:hover, .cloud-icp:hover { color: #0ea5e9; text-decoration: underline; }
.guide-divider {
  max-width: 46rem;
  width: 100%;
  margin: 2.4rem auto .2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .5), rgba(148, 163, 184, .75), rgba(0, 229, 255, .5), transparent);
}

/* ---------- 弹窗 ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(8px);
}
.modal-card {
  width: 100%;
  max-width: 32rem;
  max-height: 86vh;
  overflow-y: auto;
  border: 1px solid rgba(0, 229, 255, .25);
  border-radius: 1.1rem;
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 0 60px rgba(0, 229, 255, .12);
  padding: 1.5rem;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.modal-head h2 { font-size: 1.05rem; font-weight: 500; color: #e2e8f0; letter-spacing: .06em; }
.modal-close {
  border: 1px solid rgba(148, 163, 184, .75);
  background: rgba(30, 41, 59, .6);
  color: #e2e8f0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}
.modal-close:hover { color: #ffffff; border-color: rgba(0, 229, 255, .7); background: rgba(30, 41, 59, .95); }

.type-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .9rem;
  background: rgba(30, 41, 59, .45);
  padding: .95rem 1rem;
  cursor: pointer;
  transition: all .15s;
}
.type-card:hover { border-color: rgba(0, 229, 255, .55); background: rgba(0, 229, 255, .06); }
.type-card .ic { font-size: 1.5rem; width: 2.4rem; text-align: center; }
.type-card h4 { color: #e2e8f0; font-size: .92rem; font-weight: 500; }
.type-card p { color: #64748b; font-size: .72rem; margin-top: .2rem; line-height: 1.5; }
.type-card .arrow { margin-left: auto; color: #475569; font-size: 1.1rem; }
.type-card:hover .arrow { color: #33ecff; }

.dev-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .6rem;
  background: rgba(30, 41, 59, .45);
  padding: .3rem .6rem;
  transition: all .15s;
  text-align: left;
}
.dev-item:hover { border-color: rgba(0, 229, 255, .55); background: rgba(0, 229, 255, .06); }
.dev-item .dot { width: .45rem; height: .45rem; border-radius: 9999px; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; flex: none; }
.dev-item .dev-info { flex: 1; min-width: 0; overflow: hidden; }
.dev-item .dev-info h4 { color: #e2e8f0; font-size: .78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-item .dev-info p { color: #64748b; font-size: .62rem; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-item .dev-connect { flex: none; margin-right: .35rem; }
.serial-item { cursor: pointer; }

.error-box {
  border: 1px solid rgba(248, 113, 113, .4);
  background: rgba(248, 113, 113, .08);
  color: #fca5a5;
  border-radius: .6rem;
  padding: .6rem .8rem;
  font-size: .78rem;
  line-height: 1.55;
}
.busy-line { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: #94a3b8; }
.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(0, 229, 255, .25);
  border-top-color: #00e5ff;
  border-radius: 9999px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; }
.muted { color: #64748b; font-size: .72rem; }

/* ---------- 引导页：MQTT 远程入口 ---------- */
#btn-remote-mqtt {
  grid-column: 1 / -1;
  max-width: 23rem;
  justify-self: center;
  width: 100%;
}

/* ---------- MQTT 远程登录页 ---------- */
.remote-screen-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.remote-login-card {
  width: 100%;
  max-width: 28rem;
  padding: 1.6rem 1.7rem 1.7rem;
}
.remote-card-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: #f0fdff;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 0 14px rgba(0, 229, 255, .35);
}
.remote-card-sub {
  color: #64748b;
  font-size: .78rem;
  line-height: 1.7;
  text-align: center;
  margin: .55rem 0 1.15rem;
}
.remote-field {
  display: block;
  margin-bottom: .9rem;
}
/* 登录表单：用户名/密码一行，右侧一个登录按钮 */
.remote-login-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
  margin-top: 1.3rem;
}
.remote-login-row .remote-field {
  flex: 1 1 10rem;
  min-width: 0;
  margin-bottom: 0;
}
.remote-login-btn {
  flex: none;
  min-width: 7.5rem;
  height: 2.62rem;
  padding: 0 1.4rem;
}
.remote-field > span {
  display: block;
  color: #94a3b8;
  font-size: .75rem;
  margin-bottom: .35rem;
  letter-spacing: .03em;
}
.remote-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(2, 6, 23, .55);
  border: 1px solid rgba(71, 85, 105, .85);
  border-radius: .55rem;
  color: #e2e8f0;
  padding: .55rem .7rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.remote-input:focus {
  border-color: rgba(0, 229, 255, .6);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .08);
}

/* ---------- MQTT 远程设备总览页 ---------- */
.remote-page {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}
.remote-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.2rem;
  padding: .1rem 0 .4rem;
}
.remote-mode {
  margin-left: .8rem;
  font-size: .72rem;
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, .4);
  background: rgba(0, 229, 255, .06);
  border-radius: 9999px;
  padding: .14rem .7rem;
  vertical-align: middle;
  letter-spacing: .06em;
}
.remote-account { margin-top: .28rem; font-size: .78rem; }
.remote-body {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .remote-body { grid-template-columns: 1fr; }
}
.remote-list-panel {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  min-height: 30rem;
}
.remote-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .7rem;
}
.remote-panel-head h2 {
  font-size: .95rem;
  font-weight: 600;
  color: #e2f7ff;
  letter-spacing: .08em;
}
.remote-list-panel > .remote-input { margin-bottom: .75rem; flex: none; }
.remote-device-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.remote-device-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .7rem;
  background: rgba(30, 41, 59, .4);
  padding: .6rem .7rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.remote-device-row:hover {
  border-color: rgba(0, 229, 255, .5);
  background: rgba(0, 229, 255, .06);
}
.remote-device-row.sel {
  border-color: rgba(0, 229, 255, .75);
  background: rgba(0, 229, 255, .12);
  box-shadow: 0 0 16px rgba(0, 229, 255, .12);
}
.remote-device-row .rdot {
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  flex: none;
  background: #475569;
}
.remote-device-row.online .rdot {
  background: #34d399;
  box-shadow: 0 0 7px rgba(52, 211, 153, .8);
}
.remote-device-row .rd-main { flex: 1; min-width: 0; }
.remote-device-row .rd-main h4 {
  color: #e2e8f0;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remote-device-row .rd-main p {
  color: #64748b;
  font-size: .66rem;
  margin-top: .18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 设备行第三行：最近一次定位名称 */
.remote-device-row .rd-main p.rd-loc {
  color: #7dd3fc;
  opacity: .85;
  margin-top: .12rem;
}
.remote-device-row .rd-meta {
  flex: none;
  text-align: right;
  color: #7dd3fc;
  font-size: .72rem;
}
.remote-empty {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #475569;
  gap: .8rem;
}
.remote-empty-ic { font-size: 2.6rem; color: rgba(0, 229, 255, .35); }
.remote-empty p { font-size: .9rem; }
.remote-detail-panel {
  padding: 1.25rem 1.35rem;
  min-height: 23rem;
}
.remote-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;          /* 表头固定一行，不换行 */
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(51, 65, 85, .8);
}
/* 表头：设备名 + 电池ID/SN 合成一行 */
.remote-detail-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: .15rem .7rem;
  flex: 1 1 auto;
  min-width: 0;
}
.remote-detail-head .status-pill { flex: none; }
.remote-detail-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #f0fdff;
  letter-spacing: .02em;
  white-space: nowrap;
}
.remote-detail-sn {
  font-size: .78rem;
  margin-top: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remote-kv {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .55rem .9rem;
}
.remote-kv > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  background: rgba(2, 6, 23, .35);
  border: 1px solid rgba(51, 65, 85, .7);
  border-radius: .6rem;
  padding: .5rem .7rem;
}
.remote-kv span { color: #64748b; font-size: .74rem; }
.remote-kv b { color: #e2f7ff; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 设备详情：上方名称、下方对应数值（无方框，纯文字） */
.remote-detail-line1 {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));   /* 最后一列（更新时间）占两格 */
  gap: .55rem .7rem;
  margin-top: .9rem;
}
.remote-detail-line1 .dl-cell:nth-child(8) { grid-column: span 2; }
@media (max-width: 1100px) {
  .remote-detail-line1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .remote-detail-line1 .dl-cell:nth-child(8) { grid-column: span 4; }
}
.remote-detail-line2 {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: .55rem .8rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed rgba(51, 65, 85, .55);
}
.remote-detail-line1 .dl-cell,
.remote-detail-line2 .dl-cell {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  position: relative;
}
/* 每项之间的竖向分隔线：高度从名称贯穿到数值 */
.remote-detail-line1 .dl-cell::after,
.remote-detail-line2 .dl-cell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -.35rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(148, 163, 184, .1),
    rgba(148, 163, 184, .45) 18%,
    rgba(148, 163, 184, .45) 82%,
    rgba(148, 163, 184, .1));
}
.remote-detail-line1 .dl-cell:last-child::after,
.remote-detail-line2 .dl-cell:last-child::after { display: none; }
@media (max-width: 1100px) {
  /* 窄屏换行时，行尾不画多余的竖线 */
  .remote-detail-line1 .dl-cell:nth-child(4)::after,
  .remote-detail-line1 .dl-cell:nth-child(7)::after { display: none; }
}
.remote-detail-line1 .dl-k,
.remote-detail-line2 .dl-k {
  color: #ffffff;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.remote-detail-line1 .dl-cell > b,
.remote-detail-line2 .dl-cell > b {
  color: #22d3ee;
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remote-actions {
  margin-top: 1.4rem;
  display: flex;
  gap: .45rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.remote-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding: .55rem .25rem;
  font-size: .82rem;
}
.remote-actions #remote-enter { min-width: 0; }
.remote-note { margin-top: 1rem; line-height: 1.7; }
.remote-sub-area {
  position: relative;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(51, 65, 85, .8);
  min-height: 21rem;
}
.remote-sub-area.sub-loading::after {
  content: '正在加载…';
  position: absolute;
  top: .6rem;
  right: 1rem;
  color: rgba(0, 229, 255, .75);
  font-size: .74rem;
  letter-spacing: .05em;
}

/* ---------- 云端历史 / 定位 / 轨迹 ---------- */
.remote-hist-wrap {
  max-height: 21rem;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .6rem;
}
.remote-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.remote-hist-table th {
  position: sticky;
  top: 0;
  background: #0f2b44;
  color: #cfefff;
  padding: .5rem .6rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 229, 255, .25);
}
.remote-hist-table td {
  color: #cfe3f2;
  padding: .42rem .6rem;
  border-bottom: 1px solid rgba(51, 65, 85, .55);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.remote-hist-table tr:nth-child(even) td {
  background: rgba(30, 41, 59, .25);
}
.remote-hist-table td.hist-alarm {
  color: #f87171;
  font-weight: 600;
}
.remote-hist-table td.hist-loc {
  color: #9fd7ef;
}
.curve-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-bottom: .7rem;
}
.curve-controls label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #94a3b8;
  font-size: .78rem;
}
.curve-controls select {
  background: rgba(2, 6, 23, .6);
  border: 1px solid rgba(71, 85, 105, .9);
  color: #dffcff;
  border-radius: .45rem;
  padding: .32rem .5rem;
  font-size: .78rem;
}
/* 历史数据 / 历史曲线 / 历史轨迹 的"起始时间"工具条 */
.range-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: .15rem 0 .65rem;
}
.range-bar label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #94a3b8;
  font-size: .78rem;
}
.range-bar input[type="datetime-local"],
.curve-controls input[type="datetime-local"] {
  background: rgba(2, 6, 23, .6);
  border: 1px solid rgba(71, 85, 105, .9);
  color: #dffcff;
  border-radius: .45rem;
  padding: .32rem .5rem;
  font-size: .78rem;
  color-scheme: dark;
}
.curve-wrap-area {
  position: relative;
  width: 100%;
  height: 19rem;
  border: 1px solid rgba(51, 65, 85, .9);
  border-radius: .6rem;
  background: rgba(2, 10, 24, .55);
  overflow: hidden;
}
#curve-canvas {
  display: block;
}
.curve-tip {
  position: absolute;
  z-index: 8;
  min-width: 10.5rem;
  max-width: 15rem;
  pointer-events: none;
  background: rgba(3, 18, 38, .96);
  border: 1px solid rgba(0, 229, 255, .4);
  border-radius: .5rem;
  padding: .4rem .55rem;
  color: #d6f7ff;
  font-size: .68rem;
  line-height: 1.55;
  box-shadow: 0 0 14px rgba(0, 229, 255, .14);
}
.remote-loc-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .4rem;
  margin-bottom: .35rem;
  padding-bottom: .15rem;
}
.remote-loc-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  flex: none;
  white-space: nowrap;
  background: rgba(2, 6, 23, .35);
  border: 1px solid rgba(51, 65, 85, .7);
  border-radius: .45rem;
  padding: .3rem .55rem;
}
.remote-loc-grid span { color: #64748b; font-size: .66rem; }
.remote-loc-grid b { color: #e6fbff; font-size: .78rem; font-weight: 600; }
.remote-mini-map {
  display: block;
  width: 100%;
  height: 21rem;
  border-radius: .7rem;
  background: rgba(5, 18, 36, .9);
  border: 1px solid rgba(51, 65, 85, .9);
}
.mini-grid { stroke: rgba(79, 130, 175, .16); stroke-width: 1; }
.mini-track {
  fill: none;
  stroke: #38d6ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(56, 214, 255, .35));
}
.mini-dot { stroke: rgba(2, 10, 24, .9); stroke-width: 2; }
.mini-dot.start { fill: #ffd166; }
.mini-dot.end { fill: #ff5d5d; }
.mini-dot.live { fill: #22e6a0; filter: drop-shadow(0 0 5px rgba(34, 230, 160, .8)); }
.remote-mini-note { margin-top: .7rem; line-height: 1.7; }

/* ---------- 实时定位真实地图 ---------- */
.remote-loc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin: .25rem 0 .5rem;
}
.remote-real-map {
  height: min(34rem, 72vh);
  width: 100%;
  border-radius: .7rem;
  border: 1px solid rgba(51, 65, 85, .9);
  background: #0a1c36;
}
/* 夜间配色由高德官方样式 amap://styles/darkblue 提供，这里只兜底容器底色，
   避免瓦片加载时闪白底。 */
.remote-real-map.map-night {
  background: #0a1220;
}
/* 地图容器外面再包一层，用来放自绘的缩放按钮 */
.remote-map-wrap {
  position: relative;
}
.map-zoom {
  position: absolute;
  right: .7rem;
  bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 600;
}
.map-zoom button {
  width: 30px;
  height: 30px;
  line-height: 1;
  border-radius: .45rem;
  cursor: pointer;
  border: 1px solid rgba(0, 229, 255, .35);
  background: rgba(8, 24, 46, .92);
  color: #bfe9ff;
  font-size: 17px;
  font-weight: 700;
  transition: background .15s, border-color .15s;
}
.map-zoom button:hover {
  background: rgba(0, 229, 255, .18);
  border-color: rgba(0, 229, 255, .6);
}
/* 高德版权与 logo 在深色底图上的可读性 */
.remote-real-map .amap-copyright {
  background: rgba(3, 12, 26, .55);
  color: #7fa3bd;
  font-size: 10px;
}
.remote-real-map .amap-logo { opacity: .85; }
.remote-loc-address {
  margin-top: .7rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(0, 229, 255, .3);
  background: rgba(0, 229, 255, .06);
  border-radius: .6rem;
  color: #dffcff;
  font-size: .88rem;
  line-height: 1.6;
}
.remote-loc-address b {
  color: #00e5ff;
  font-weight: 600;
}
.loc-marker {
  background: transparent;
  border: none;
}
.loc-pin {
  position: relative;
  width: 30px;
  height: 30px;
}
.loc-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 9999px;
  background: #2ee6a4;
  border: 2px solid rgba(2, 12, 26, .95);
  box-shadow: 0 0 14px rgba(46, 230, 164, .95);
}
.loc-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 9999px;
  border: 2px solid rgba(46, 230, 164, .9);
  animation: locRipple 2.2s ease-out infinite;
}
.loc-ring.r2 { animation-delay: 1.1s; }
@keyframes locRipple {
  0% { transform: scale(.3); opacity: .95; }
  70% { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- 历史轨迹演示地图 ---------- */
.remote-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin: .4rem 0 .6rem;
}
.remote-track-legend {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #94a3b8;
  font-size: .74rem;
}
.remote-track-legend i {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 9999px;
  margin-right: .15rem;
}
.remote-track-legend i.start { background: #22e6a0; }
.remote-track-legend i.end { background: #ff5d5d; }
.track-car-marker {
  background: transparent;
  border: none;
}
.track-car {
  width: 36px;
  height: 26px;
  filter: drop-shadow(0 0 5px rgba(56, 214, 255, .9));
}
.track-car svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 远程设备分布地图 ---------- */
.remote-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.remote-map-panel {
  padding: 1rem 1rem .55rem;
}
.remote-map-meta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.remote-legend {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #94a3b8;
  font-size: .7rem;
}
.remote-legend i {
  display: inline-block;
  width: .48rem;
  height: .48rem;
  border-radius: 9999px;
  background: #64748b;
}
.remote-legend i.on {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, .8);
}
.remote-map-box {
  position: relative;
  width: 100%;
  height: 31rem;
  border-radius: .7rem;
  overflow: hidden;
  background: rgba(6, 20, 38, .9);
  cursor: grab;
}
.remote-map-clock {
  flex: none;
  color: rgba(201, 232, 244, .72);
  font-size: .74rem;
  letter-spacing: .04em;
  text-shadow: 0 0 6px rgba(2, 10, 20, .9);
  font-variant-numeric: tabular-nums;
}
.remote-map-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.remote-map-topline .remote-map-cityline {
  flex: 1;
  min-width: 0;
}
.map-online-count,
.map-offline-count {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.map-online-count {
  color: #34d399;
}
.map-offline-count {
  margin-left: .9rem;
  color: #fb7185;
}
.map-scope {
  margin-left: .7rem;
  color: #7fa8b4;
  font-size: .74rem;
  font-weight: 400;
}
.remote-map-box svg {
  display: block;
  width: 100%;
  height: 100%;
}
#china-map-land path {
  fill: none;
  stroke: rgba(88, 140, 245, .95);
  stroke-width: 1;
  stroke-linejoin: round;
}
#china-map-land path:hover {
  stroke: #bfe3ff;
}
#china-map-land.world-map-layer path {
  stroke: rgba(88, 140, 245, .78);
  stroke-width: .85;
}
#china-map-provinces {
  pointer-events: none;
}
#china-map-provinces path {
  fill: none;
  stroke: rgba(91, 143, 255, .98);
  stroke-width: 1.35;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#china-map-national-border {
  pointer-events: none;
}
#china-map-national-border .china-national-border {
  fill: none;
  stroke: #ef5263;
  stroke-width: 2.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(239, 82, 99, .48));
}
#china-map-border path.border-under {
  fill: none;
  stroke: #5f4814;
  stroke-width: 3.6;
  opacity: .3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#china-map-border path.border-main {
  fill: none;
  stroke: #9f7320;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#china-map-border.world-map-layer path.border-main {
  stroke: #8a681f;
  stroke-width: 1.1;
  opacity: .78;
}
.device-city-label {
  fill: #76efff;
  opacity: 0;
  transition: opacity .16s ease;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: rgba(2, 12, 26, .96);
  stroke-width: 1.5px;
  letter-spacing: .02em;
}
.device-city-label.zoom-visible {
  opacity: 1;
}
.map-province-label {
  fill: rgba(110, 209, 230, .82);
  opacity: 0;
  transition: opacity .16s ease;
  font-size: 12px;
  font-weight: 400;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: rgba(2, 12, 26, .94);
  stroke-width: 2px;
  letter-spacing: .03em;
}
.map-province-label.zoom-visible {
  opacity: 1;
}
.map-zoom-controls {
  position: absolute;
  z-index: 4;
  top: .75rem;
  right: .75rem;
  display: flex;
  flex-direction: column;
  gap: .32rem;
}
.map-zoom-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(105, 211, 235, .58);
  border-radius: .32rem;
  background: rgba(5, 20, 37, .9);
  color: #b9f7ff;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.map-zoom-btn:hover {
  border-color: #00e5ff;
  color: #fff;
  background: rgba(0, 83, 110, .8);
}
.map-zoom-reset { font-size: 1.05rem; }
#remote-map-box.map-dragging,
#remote-map-box.map-dragging #china-map-svg {
  cursor: grabbing;
}
#china-map-svg {
  cursor: default;
  shape-rendering: geometricPrecision;
}
#china-map-svg:active {
  cursor: grabbing;
}
#china-map-markers {
  pointer-events: none;
}
.remote-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: .85rem;
}
.mk-loc {
  cursor: default;
}
.mk-dot {
  stroke: rgba(2, 10, 24, .95);
  stroke-width: 2.4;
}
.mk-dot.online {
  fill: #22e6a0;
}
.mk-dot.offline {
  fill: #b9c4d2;
}
.mk-ripple {
  fill: none;
  stroke: #22e6a0;
  stroke-width: 2.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: mkRipple 2.4s ease-out infinite;
}
.mk-ripple.d2 { animation-delay: 1.2s; }
.mk-ripple.d3 { animation-delay: .6s; }
@keyframes mkRipple {
  0% { transform: scale(.28); opacity: .9; }
  72% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.remote-map-cityline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
  padding: .15rem 0 .65rem;
}
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  border: 1px solid rgba(0, 229, 255, .28);
  background: rgba(0, 229, 255, .05);
  border-radius: 9999px;
  padding: .16rem .6rem;
  color: #eafdff;
  font-size: .78rem;
  line-height: 1.3;
}
.city-chip i {
  width: .42rem;
  height: .42rem;
  border-radius: 9999px;
  background: #94a3b8;
  flex: none;
}
.city-chip i.on {
  background: #34d399;
  box-shadow: 0 0 5px rgba(52, 211, 153, .9);
}
.city-chip b {
  color: #d6f9ff;
  font-weight: 600;
}
.city-chip .city-on {
  color: #34d399;
  font-weight: 500;
}
.city-chip .city-off {
  color: #94a3b8;
  font-weight: 500;
}