* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "HarmonyOS Sans SC", Regular;
  color: #ffffff;
}

/* 页面容器：背景图 */
*,body{padding:0px;	margin:0px;font-family: "HarmonyOS Sans SC", Regular;}
body{  background: url('/images/bg.png') no-repeat center center;color:#fff; font-size: .1rem; }

/*谷哥滚动条样式*/
::-webkit-scrollbar {width:5px;height:5px;position:absolute}
::-webkit-scrollbar-thumb {background-color:rgba(3, 166, 239, 1)}
::-webkit-scrollbar-track {background-color:#ddd}
/***/


/* 顶部标题：第三张（分割线）+ 第四张（系统名称） */
.header-title {
  width: 100%;
  height: 85px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.title-text {
  z-index: 2;
  height: 57px;
  margin-bottom: 5px;
}
.time-info {
  position: absolute;
  top: 23px;
  left: 24px;
  font-size: 16px;
  color: rgba(0, 201, 255, 1);
}

/* 选项卡导航：第五、六、七、八张图 */
.tab-nav {
  width: 100%;
  height: 64px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.tab-item {
  z-index: 2;
  /* width: 200px; */
  height: 65px;
  cursor: pointer;
}

/* 外层容器：包含图标+文字+下划线 */
.card-container {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-bottom: 8px; /* 文字/图标与下划线的间距 */
  width: 100%;
  font-size: 16px; /* 文字大小，可按需调整 */
  font-weight: bold; /* 文字加粗，匹配效果图 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(98, 200, 255, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}

/* 组合图标容器：将第二张图嵌入第三张图中心 */
.icon-group {
  width: 20px; /* 第三张图的尺寸（20x20） */
  height: 20px;
  position: relative;
  margin-right: 8px; /* 图标与文字的间距 */
}

/* 内层图标（第二张图：24x24）- 居中嵌入 */
.inner-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 绝对居中 */
  width: 20px; /* 第二张图的原始尺寸 */
  height: 20px;
  /* 这里替换成你第二张图的实际URL */
  background-image: url("/images/icon-bg.png");
  background-size: 100% 100%; /* 适配容器 */
  background-repeat: no-repeat;
}

/* 外层图标（第三张图：20x20） */
.outer-icon {
  width: 100%;
  height: 100%;
  /* 这里替换成你第三张图的实际URL */
  background-image: url("/images/icon-center.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1; /* 确保外层图标不遮挡内层 */
}

/* 分段式下划线：固定长度 20+200+10px */
.card-container::after {
  content: '';
  position: absolute;
  /* left: -5px; */
  bottom: 0;
  height: 2px; /* 下划线高度 */
  width: 100%; /* 总长度：20+200+10=230px */
  background-image: 
    linear-gradient(to right, rgba(24, 253, 254, 1), rgba(24, 253, 254, 1)), /* 第一段短下划线 */
    linear-gradient(to right, rgba(24, 253, 254, 1), rgba(24, 253, 254, 1)), /* 中间长下划线 */
    linear-gradient(to right, rgba(24, 253, 254, 1), rgba(24, 253, 254, 1)); /* 最后一段短下划线 */
    background-size: 
    30px 2px,  /* 第一段：长度20px，高度2px */
    calc(100% - 50px) 1px, /* 第二段：长度200px，高度1px */
    10px 2px;  /* 第三段：长度10px，高度2px */
  background-position: 
    left top,    /* 第一段位置：左对齐 */
    30px bottom,    /* 中间段位置：从第一段结束处开始 */
    right top;   /* 最后一段位置：右对齐 */
  background-repeat: no-repeat;

}

/* -------------------------------------------正式内容-------------------------------------- */

.main-container {
  margin: 0 auto;
  padding: 10px;
}

.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* ========== 第一部分：故障区域（德州地图） ========== */
.map-container {
  width: 1086px;
}
.fault-map-area {
  width: 1086px;
  height: 531px;
  position: relative;
  background: url("/images/bg-map.png") no-repeat center center;
  /* border: 1px solid #00f0f8; */
}

#dezhou-mapdata {
  width: 100%;
  height: 100%;
}

/* ========== 第二部分：今日关注 ========== */
.today-focus-area {
  width: 782px;
  height: 521px;
  padding: 10px;
  overflow: hidden;
  position: relative;
  background: url("/images/bg-middle.png") no-repeat center center;
  background-size: cover; /* 关键：保持图片比例，覆盖整个容器（裁剪多余部分） */
  background-position: center; /* 可选：让图片在容器中居中显示 */
  background-repeat: no-repeat; /* 必加：禁止图片重复平铺 */
}

.focus-item {
  width: 100%;
  padding-top: 20px;
}

/* 区域行（德城区/乐陵市/临邑县） */
.area-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
}

.area-box {
  width: 162.45px;
  height: 41px;
  background: url("/images/bg-green.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

/* 线路行（10kv水晶线等） */
.line-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
}

.line-box {
  width: 193px;
  height: 44.46px;
  background: url("/images/bg-blue.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-align: center;
}

/* 配电区行（图6/图7背景） */
.dist-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
}

.dist-box-6 {
  width: 193px;
  height: 51.71px;
  background: url("/images/bg-yellow.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-align: center;
  padding: 0 5px;
}

.dist-box-7 {
  width: 193px;
  height: 51.71px;
  background: url("/images/bg-red.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-align: center;
  padding: 0 5px;
}

/* 提示文字样式 */
.warning-text {
  font-size: 14px;
  color: #ffd700;
  margin-bottom: 3px;
}

/* 分割线（图4背景） */
.split-line {
  width: 100%;
  height: 2px;
  background: url("/images/bg-line.png") no-repeat center center;
  background-size: 100% 100%;
}

.mid-texture {
  width: 100%;
  height: 7px;
  background: url("/images/bg-mid-texture.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 10px;
}

/* ========== 第三部分：预警设备列表 ========== */

.warning-equipment-table {
  width: 1888px;
  overflow: hidden;
  position: relative;
}

.equipment-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  padding-top: 20px;
}

.equipment-table thead tr {
  background: url("/images/bg-table.png") no-repeat center center;
  background-size: 100% 100%;
  height: 30px;
}
.equipment-table tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.08);
}

.equipment-table th, .equipment-table td {
  width: 236px;
  height: 30px;
  text-align: center;
  font-size: 14px;
  color: rgba(203, 222, 237, 1);
  font-family:'Source Han Sans CN';
  /* border: 1px solid rgba(0, 240, 248, 0.3); */
}

.warning-dot {
  display: inline-block;
  margin-top: 5px;
  width: 20px;
  height: 20px;
}

.red {
  background: url("/images/bg-table-red.png") no-repeat center center;
}

.orange {
  background: url("/images/bg-table-orange.png") no-repeat center center;
}

.cyan {
  background: url("/images/bg-table-cyan.png") no-repeat center center;
}

.view-btn {
  display: inline-block;
  background: url("/images/bg-table-view.png") no-repeat center center;
  width: 40px;
  height: 22px;
  cursor: pointer;
}