/* ============================================================================
   让“标题固定，仅表格区域滚动”
   思路：
   1) 页面不滚动：body/容器都 overflow:hidden；
   2) 每个卡片 .card.fill 高度 100%，内部用 flex 布局：
      - .card-header 固定在顶部（不滚）
      - .kv-scroll 占据剩余空间并 overflow:auto（唯一滚动条）
   3) 上/下两块 + 各自左右两列仅作布局，不再产生内部滚动。
   ========================================================================== */

:root {
  --bg: #f7f8fa;
  --card: #fff;
  --text: #222;
  --sub: #666;
  --muted: #9aa1a9;
  --line: #e5e7eb;
  --brand: #1f8bff;
  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #ef4444;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* 布局变量 */
  --topbar-h: 56px;
  --container-p: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  /* 🔧 修复：增大字体，改善可读性 */
  font: 16px/1.6 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* 顶部栏 */
.topbar {
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.topbar .brand { 
  font-weight: 700; 
  color: var(--brand);
  font-size: 18px;
}

.topbar .nav { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.topbar .nav .tab-btn {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.topbar .nav .tab-btn.active { 
  background: var(--brand); 
  color: #fff;
  border-color: var(--brand);
}

.topbar .nav .tab-btn:hover {
  background: #f5f5f5;
}

.topbar .nav .tab-btn.active:hover {
  background: var(--brand);
}

/* 🔴 已删除心跳状态样式 */

/* 🆕 导航栏右侧区域 */
.topbar .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 🆕 实时时钟 */
.topbar .system-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.topbar .system-time .time-icon {
  font-size: 16px;
}

/* 🆕 用户信息 */
.topbar .user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}

.topbar .user-info .user-icon {
  font-size: 16px;
}

/* 🆕 退出按钮 */
.topbar .btn-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--err);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.topbar .btn-logout:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.topbar .btn-logout:active {
  transform: translateY(0);
}

.muted { color: var(--muted); }

/* 🔧 修复：主容器布局 - 扩大显示区域 */
.container {
  height: calc(100vh - var(--topbar-h));
  /* 修复：使用更大的宽度，减少边距 */
  width: 98%;
  max-width: 1400px;  /* 增大最大宽度 */
  margin: 8px auto;   /* 减少上下边距 */
  padding: 8px;       /* 减少内边距 */
  overflow: hidden;
}

/* 选项卡内容 */
.tab-section { 
  display: none; 
  height: 100%; 
}
.tab-section.active { 
  display: block; 
  height: 100%; 
}

/* 🔧 修复：卡片布局 - 充分利用空间 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;  /* 增加内边距 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card.fill {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  flex: 0 0 auto;
  margin-bottom: 16px;
}

.card-header h2 { 
  margin: 0; 
  font-size: 20px;  /* 增大标题字体 */
  color: var(--text);
}

/* 🔧 修复：滚动区域 - 更好的可读性 */
.kv-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 8px 8px 0;
  overscroll-behavior: contain;
}

/* 布局组件 */
.kv-wrapper { 
  display: flex; 
  flex-direction: column; 
  gap: 16px;  /* 增加间距 */
}

.kv-part { 
  height: auto; 
  overflow: visible; 
}

.two-col { 
  display: flex; 
  gap: 16px;  /* 增加列间距 */
}

.two-col .col { 
  flex: 1 1 50%; 
  padding: 12px;  /* 增加列内边距 */
  background: #fafafa;
  border-radius: 6px;
  overflow: visible; 
}

/* 🔧 修复：表格样式 - 提升可读性 */
table { 
  width: 100%; 
  border-collapse: collapse; 
  table-layout: fixed;
  font-size: 14px;  /* 设置合适的表格字体大小 */
}

th, td {
  padding: 10px 12px;  /* 增加单元格内边距 */
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  background: #f8f9fa;
  font-weight: 600;
  color: var(--sub);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 两列表格特殊样式 */
.two-col .col th, 
.two-col .col td {
  padding: 8px 10px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.two-col .col th {
  background: #f1f3f4;
  font-size: 12px;
}

/* 源表隐藏 */
#battery-table, 
#pcs-table, 
#cooling-table { 
  display: none !important; 
}

/* 🔴 已删除刷新控制样式 */

/* 总览页面 - 设备网格 */
.overview-content {
  height: calc(100vh - 60px); /* 减去顶部导航高度 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

/* KPI 统计区域 */
.kpi-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0; /* 防止压缩 */
}

.kpi-card {
  flex: 1 1 200px;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.kpi-number {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.kpi-label {
  font-size: 14px;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* 设备网格容器 */
.devices-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 8px;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 8px 0;
}

/* 设备卡片主体 */
.device-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.device-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.device-card.online {
  border-left: 4px solid var(--ok);
}

.device-card.offline {
  border-left: 4px solid var(--err);
}

/* 设备卡片头部 */
.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.device-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* 🔧 心跳指示器样式 */
.heartbeat-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  background: var(--bg);
}

.heartbeat-icon {
  font-size: 14px;
  display: inline-block;
}

.heartbeat-text {
  color: var(--sub);
  font-weight: 500;
  white-space: nowrap;
}

.device-card.online .heartbeat-text {
  color: var(--ok);
}

.device-card.offline .heartbeat-text {
  color: var(--err);
}

/* 🔧 心跳动画效果 */
.device-card.online .heartbeat-icon {
  animation: heartbeat 2s infinite ease-in-out;
}

@keyframes heartbeat {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.2); 
  }
}

/* 设备信息区域 */
.device-info {
  flex: 1 1 auto;
  margin-bottom: 16px;
}

.device-info p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-info strong {
  color: var(--sub);
  font-weight: 500;
  min-width: 50px;
  flex-shrink: 0;
}

.device-status.online {
  color: var(--ok);
  font-weight: 600;
}

.device-status.offline {
  color: var(--err);
  font-weight: 600;
}

/* 🔧 设备操作按钮区域 */
.device-actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.btn-detail {
  background: var(--brand);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 100px;
}

.btn-detail:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,123,255,0.3);
}

.btn-detail:active {
  transform: translateY(0);
}

/* 设备详情模态框样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: var(--card);
  border-radius: 12px;
  width: 95%;              /* 从原来的小尺寸扩大到 95% */
  max-width: 1400px;       /* 增大最大宽度 */
  max-height: 90vh;        /* 增大最大高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px 12px 0 0;
}

.modal-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--sub);
  padding: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  color: var(--text);
  background: var(--hover);
}

.modal-body {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: auto;
  min-height: 0; /* 确保可以收缩 */
}

/* ============================================================================
   🔧 设备详情模态框页签和内容样式
   ============================================================================ */

/* 详情页签切换 */
.detail-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  padding-bottom: 0;
}

.detail-tab-btn {
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  color: var(--sub);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-tab-btn:hover {
  color: var(--text);
  background: rgba(31, 139, 255, 0.05);
}

.detail-tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: rgba(31, 139, 255, 0.1);
  font-weight: 600;
}

/* 🎯 详情内容容器 */
.detail-content {
  position: relative;
  min-height: 400px;
}

/* 🎯 页签内容区域 - 默认隐藏 */
.detail-section {
  display: none;
  animation: fadeIn 0.3s ease;
}

/* 🎯 激活的页签内容 - 显示 */
.detail-section.active {
  display: block;
}

/* 🎯 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4区域网格布局 */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* 🎯 单个区域样式 */
.detail-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.detail-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.detail-item h4 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 参数显示区域 - 简洁样式 */
.detail-params {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-params .kv-row {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  padding: 12px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-params .k {
  color: #8c8c8c;
  font-size: 13px;
  font-weight: 500;
  flex: 0 0 auto;
}

.detail-params .v {
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--mono);
  flex: 0 0 auto;
  text-align: right;
}

/* 状态行（用于并排显示） */
.tou-status-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: stretch;
}

.param-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.param-row:last-child {
  border-bottom: none;
}

.param-name {
  color: var(--sub);
  font-size: 14px;
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
}

.param-value {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  font-family: var(--mono);
}

/* ===============================================
   🎯 电池/PCS/液冷四分区表格样式优化
   =============================================== */

/* 四分区表格 - 调整列顺序和宽度 */
.detail-item table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* 列宽分配：#(8%) | 名称(50%) | 数值(22%) | 单位(20%) */
.detail-item table th:nth-child(1),
.detail-item table td:nth-child(1) {
  width: 8%;  /* # 编号列 */
  text-align: center;
  font-weight: 600;
  color: var(--sub);
}

.detail-item table th:nth-child(2),
.detail-item table td:nth-child(2) {
  width: 50%;  /* 名称列 - 增大宽度 */
  text-align: left;
  font-weight: 500;
  padding-left: 12px;
}

.detail-item table th:nth-child(3),
.detail-item table td:nth-child(3) {
  width: 22%;  /* 数值列 */
  text-align: right;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  padding-right: 12px;
}

.detail-item table th:nth-child(4),
.detail-item table td:nth-child(4) {
  width: 20%;  /* 单位列 */
  text-align: center;
  color: var(--sub);
  font-size: 13px;
}

/* 表头样式优化 */
.detail-item table thead {
  background: #f8f9fa;
  border-bottom: 2px solid var(--line);
}

.detail-item table th {
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 表格行样式 */
.detail-item table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.2s ease;
}

.detail-item table tbody tr:hover {
  background: rgba(31, 139, 255, 0.05);
}

.detail-item table tbody tr:last-child {
  border-bottom: none;
}

.detail-item table td {
  padding: 10px 8px;
  font-size: 14px;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .detail-item table th:nth-child(2),
  .detail-item table td:nth-child(2) {
    width: 45%;
  }
  
  .detail-item table th:nth-child(3),
  .detail-item table td:nth-child(3) {
    width: 27%;
  }
}

/* 🎯 时间戳样式 */
.detail-timestamp {
  text-align: center;
  color: var(--sub);
  font-size: 12px;
  font-style: italic;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
}

/* 🎯 响应式优化 */
@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .modal-content {
    width: 98%;
    max-height: 95vh;
  }
  
  .modal-body {
    padding: 16px;
  }
}

/* 🔧 修复加载和错误状态样式 */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--sub);
  font-size: 16px;
  animation: pulse 1.5s infinite;
}

.error {
  text-align: center;
  padding: 40px 20px;
  color: var(--err);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  margin: 20px;
}

.error h4 {
  margin: 0 0 12px 0;
  color: var(--err);
}

.error p {
  margin: 8px 0;
  font-size: 14px;
}

.btn-retry {
  background: var(--brand);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 12px;
  transition: all 0.2s ease;
}

.btn-retry:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.no-data {
  text-align: center;
  padding: 40px 20px;
  color: var(--sub);
  font-size: 16px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  border: 1px dashed var(--line);
}

.data-table {
  margin-top: 16px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* 🔧 设备详情内容容器 */
.detail-content-wrapper {
  padding: 20px;
}

.detail-info {
  background: rgba(31, 139, 255, 0.05);
  border: 1px solid rgba(31, 139, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.detail-info p {
  margin: 8px 0;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.detail-info strong {
  color: var(--brand);
  font-weight: 600;
  min-width: 80px;
}

/* 🔧 数据表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.data-table thead {
  background: var(--brand);
  color: white;
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  border: none;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}

.data-table tbody tr:hover {
  background: rgba(31, 139, 255, 0.05);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table td {
  padding: 12px 16px;
  font-size: 14px;
  border: none;
}

.data-table td:first-child {
  color: var(--sub);
  font-weight: 500;
}

.data-table td:last-child {
  text-align: right;
  font-family: var(--mono);
}

.data-table td strong {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}

/* 🔧 时间戳样式 */
.detail-timestamp {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--sub);
  font-size: 13px;
  font-style: italic;
  font-family: var(--mono);
}

/* 🔧 详情内容标题 */
.detail-content-wrapper h4 {
  margin: 20px 0 12px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================================
   🔧 修复：设备详情页签内容显示控制
   ============================================================================ */

/* 🎯 默认隐藏所有页签内容 */
.detail-section {
  display: none;
}

/* 🎯 只显示激活的页签内容 */
.detail-section.active {
  display: block;
}

/* 🎯 详情内容容器 */
.detail-content {
  position: relative;
  min-height: 400px;
}

/* === Device Detail Modal: 全屏覆盖 + 粘性Tabs（新增，不改旧样式） === */

/* 覆盖层：固定充满视窗；用 .open 切换显示 */
.modal {
  position: fixed;           /* 关键：覆盖全屏 */
  inset: 0;                  /* top/right/bottom/left = 0 */
  display: none;             /* 默认隐藏，JS 加 .open 显示 */
  align-items: stretch;      /* 内容拉伸以便内部自适应 */
  justify-content: center;
  background: rgba(0, 0, 0, 0.45); /* 半透明遮罩 */
  z-index: 9999;             /* 压在最上面 */
}

/* 打开态 */
.modal.open { display: flex; }

/* 面板本体：占满全屏，不做圆角；内部用column布局 */
.modal-panel {
  background: #fff;
  width: 100%;
  height: 100%;
  max-width: none;           /* 不限制宽度 */
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

/* 头部：标题 + tabs 都放进来，做成粘性 */
.modal-header {
  position: sticky;
  top: 0;                    /* 吸顶 */
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--border, #eee);
  padding: 16px 24px;
}

/* 你原有的 tabs 容器加上这个类即可获得分隔与留白 */
.detail-tabs {
  margin-top: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.detail-tabs .btn-close-modal {
  margin-left: auto;
}

/* 内容区：自身滚动，底层页面不滚动 */
.modal-body {
  flex: 1;
  overflow: auto;
  padding: 16px 24px 24px;
}

/* 关闭按钮（若你已有，可忽略这个样式） */
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}
.modal-close:hover { color: #333; }

/* 打开 Modal 时禁用底层页面滚动（给 body 加 .no-scroll） */
body.no-scroll { overflow: hidden; }

/* === Device Detail Modal: 全屏覆盖 + 粘性Tabs（新增，只加不减） === */
.modal { position: fixed; inset: 0; display: none; align-items: stretch; justify-content: center; background: rgba(0,0,0,0.45); z-index: 9999; }
.modal.open { display: flex; }
.modal-panel { background:#fff; width:100%; height:100%; max-width:none; border-radius:0; display:flex; flex-direction:column; }
.modal-header { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); padding: 16px 24px; }
.modal-close { position: absolute; top:12px; right:16px; border:none; background:transparent; font-size:20px; cursor:pointer; color:#999; }
.modal-close:hover { color:#333; }
.modal-body { flex:1; overflow:auto; padding:16px 24px 24px; }
.detail-tabs { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:none; }
.detail-tab-btn { background:none; border:none; padding:12px 20px; cursor:pointer; color:var(--sub); border-bottom:3px solid transparent; transition:all .2s; font-size:14px; font-weight:500; white-space:nowrap; }
.detail-tab-btn:hover { color:var(--text); background:rgba(31,139,255,.05); }
.detail-tab-btn.active { color:var(--brand); border-bottom-color:var(--brand); background:rgba(31,139,255,.1); font-weight:600; }
.detail-section { display:none; }
.detail-section.active { display:block; }
body.no-scroll { overflow: hidden; }

/* 🎯 新增：醒目的关闭按钮样式 */
.btn-close-modal {
  background: var(--err);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-close-modal:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-close-modal:active {
  transform: translateY(0);
}

/* 🔧 调整模态框头部布局，为关闭按钮留空间 */
.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px 120px 16px 24px; /* 右侧留空给关闭按钮 */
}

/* ===============================================
   🎯 设置表格样式（PCS设置、液冷设置）
   =============================================== */
.setting-container {
  padding: 20px;
}

.setting-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.setting-section h4 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8e8e8;
  font-size: 16px;
  font-weight: 600;
}

.kv-row {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.kv-row:hover {
  background: #f0f0f0;
  border-color: #d0d0d0;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.kv-row .k {
  font-size: 13px;
  color: #595959;
  font-weight: 500;
  flex: 0 0 auto;
}

.kv-row .v {
  font-size: 16px;
  color: #262626;
  font-weight: 600;
  font-family: var(--mono);
  flex: 0 0 auto;
  text-align: right;
}

.kv-key {
  font-size: 13px;
  color: #595959;
  font-weight: 500;
}

.kv-value {
  font-size: 18px;
  color: #262626;
  font-weight: 600;
  font-family: var(--mono);
}

.kv-desc {
  font-size: 12px;
  color: #8c8c8c;
  font-style: italic;
}

.kv-grid {
  display: grid;
  gap: 12px;
}

.error-message {
  text-align: center;
  padding: 40px 20px;
  color: #ff4d4f;
  font-size: 14px;
}

.modal-header h2 {
  margin: 0 0 8px 0;
}

/* 🆕 远程/就地按钮激活状态 */
#btn-pcs-local.active,
#btn-pcs-remote.active {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

#btn-pcs-local.active:hover,
#btn-pcs-remote.active:hover {
  background-color: #40a9ff !important;
  border-color: #40a9ff !important;
}

/* ==================== 📱 移动端响应式样式 ==================== */

/* 🔧 移动端：导航栏优化 */
@media (max-width: 768px) {
  :root {
    --topbar-h: auto;
  }
  
  .topbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
  }
  
  .topbar .brand {
    font-size: 16px;
    flex: 1 1 auto;
  }
  
  /* 导航按钮紧凑显示 */
  .topbar .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
  }
  
  .topbar .nav::-webkit-scrollbar {
    display: none;
  }
  
  .topbar .nav .tab-btn {
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* 右侧用户信息区域优化 */
  .topbar .topbar-right {
    gap: 8px;
    margin-left: auto;
  }
  
  .topbar .system-time {
    font-size: 11px;
    gap: 4px;
  }
  
  .topbar .system-time .time-icon {
    font-size: 14px;
  }
  
  .topbar .user-info {
    font-size: 12px;
    padding: 4px 8px;
    gap: 4px;
  }
  
  .topbar .user-info .user-icon {
    font-size: 14px;
  }
  
  .topbar .btn-logout {
    padding: 4px 8px;
    font-size: 12px;
    gap: 4px;
  }
  
  /* 容器优化 */
  .container {
    padding: 8px;
  }
  
  /* KPI统计卡片 - 优化移动端高度 */
  .kpi-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .kpi-card {
    padding: 8px 6px;
    min-height: auto;
  }
  
  .kpi-number {
    font-size: 20px;
    margin: 4px 0;
  }
  
  .kpi-label {
    font-size: 11px;
  }
  
  /* 设备网格 - 优化可滚动区域 */
  .devices-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 8px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
  }
  
  .device-card {
    padding: 12px;
  }
  
  .device-card-header h3 {
    font-size: 15px;
  }
  
  .device-status-badge {
    font-size: 11px;
    padding: 3px 8px;
  }
  
  .device-params {
    gap: 8px;
  }
  
  .param-item {
    padding: 8px;
  }
  
  .param-label {
    font-size: 11px;
  }
  
  .param-value {
    font-size: 18px;
  }
  
  .param-unit {
    font-size: 11px;
  }
  
  /* 卡片样式 */
  .card {
    margin: 8px 0;
  }
  
  .card-header h2 {
    font-size: 16px;
  }
  
  /* 表格优化 */
  table {
    font-size: 13px;
  }
  
  table th, table td {
    padding: 8px 6px;
  }
  
  /* 详情模态框 */
  .modal-panel {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  
  .modal-header {
    padding: 12px;
  }
  
  .modal-header h2 {
    font-size: 16px;
  }
  
  .detail-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  
  .detail-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .detail-tab-btn {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .modal-body {
    padding: 12px;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .detail-item h4 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  /* 按钮优化 */
  button {
    font-size: 13px;
    padding: 8px 14px;
  }
  
  .btn-close-modal {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 🔧 超小屏幕（iPhone SE等） */
@media (max-width: 375px) {
  .topbar .brand {
    font-size: 14px;
  }
  
  .topbar .nav .tab-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .kpi-number {
    font-size: 20px;
  }
  
  .param-value {
    font-size: 16px;
  }
  
  .detail-tab-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}