* {
  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;
}

/* 模块图标：第九张（中心图标）放入第十张（背景框），复用 */
.module-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.icon-bg {
  position: absolute;
  width: 20px;
  height: 20px;
}
.icon-center {
  position: relative;
  /* width: 12px;
  height: 12px; */
}

/* 核心内容区 */
.content {
  width: 98%;
  height: calc(100vh - 130px);
  margin: 15px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 12px;
  padding: 0 10px;
}

/* 通用卡片样式 */
.card {
  /* background: rgba(0, 30, 60, 0.7); */
  /* border: 1px solid #1673ff;
  border-radius: 4px; */
  padding: 10px;
  position: relative;
}
.card-title {
  font-size: 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(98, 200, 255, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 以下为文字样式，可按需调整 */
  font-weight: bold;
}

/* 外层容器：包含图标+文字+下划线 */
.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;
}

/* 组合图标容器：将第二张图嵌入第三张图中心 */
.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;

}

/* 台账数据卡片 */
.ledger-card {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.ledger-table {
  border-collapse: collapse;
  width: 100%;
  background-color: transparent;
  color: #ffffff;
}
.ledger-table td {
  padding: 7px 0 0 30px;
  text-align: left;
  border: none;
  font-family: "HarmonyOS Sans SC", Regular;
}
.ledger-table tr:nth-child(odd) td {
  color: rgba(197, 208, 212, 1);
  font-size: 16px;
}
.ledger-table tr:nth-child(even) td {
  color: rgba(255, 255, 255, 1);
  padding-bottom: 20px;
  font-size: 18px;
}


/* 设备状态卡片 */
.device-card {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.health-container {
  display: flex;
  align-items: center;
  gap: 65px;
  margin-top: 30px;
  margin-left: 60px;
}
.health-card {
  width: 127px;
  height: 191px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.circle-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}
/* 外圈：虚线圆环 */
.circle-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dashed rgba(14, 252, 255, 0.3);
  /* opacity: 0.8; */
}
/* 内圈：渐变圆环 */
.circle-inner-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(42, 191, 255, 1), rgba(14, 252, 255, 0.3),rgba(42, 191, 255, 1)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* 内部文字区域 */
.circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.status {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}
.desc {
  font-size: 14px;
  opacity: 0.8;
}
.date-info {
  text-align: center;
  line-height: 1.6;
}
.date {
  font-size: 18px;
}
.date-label {
  font-size: 14px;
  opacity: 0.8;
}
#radarChart {
  width: 226.67px;
  height: 192px;
}


/* 环境量卡片 */
.env-card {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

/* 卡片容器，使用网格布局实现2x2排列 */
/* 卡片容器：使用Flex布局，避免Grid影响背景显示 */
.dashboard-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 645px;
  margin-top: 20px;
}

/* 单个卡片样式：引用图2作为卡片背景 */
.info-card {
  flex: 1 1 calc(50% - 10px);
  min-width: 280px;
  background: url("/images/card-bg.png") no-repeat center center;
  background-size: cover;
  background-position: 0 0;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 图标容器：固定尺寸53x53px */
.icon-wrapper {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* 图标图片样式 */
.icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 文本内容区域 */
.card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title {
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
}

.card-subtitle {
  font-size: 14px;
  color: rgba(197, 208, 212, 1);
  opacity: 0.8;
}


/* 电气量卡片 */
.electrical-card {
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}

/* 在线监测趋势图 */
.online-monitor-card {
  grid-column: 1 / 4;
  grid-row: 3 / 3;
}


/* 电气量容器 - 占页面高度 1/3，内部 4 部分横向排列 */
.electrical-container {
  /* height: 33.33vh; */
  width: 100%;
  display: flex;
  padding: 10px;
  gap: 10px;
}

/* 电气量第 1 部分：文字信息区 */
.electrical-part1 {
  width: 196px;
  height: 220px;
  background: url("/images/bg-left.png") no-repeat center;
  /* background-size: cover; */
  /* border-radius: 8px; */
  padding: 0px 12px;
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-title {
  font-size: 14px;
  /* opacity: 0.8; */
  color: rgba(203, 222, 237, 1);
}

.info-value {
  font-size: 16px;
  font-weight: bold;
}

.info-value-color {
  background: linear-gradient(180deg, rgba(102, 255, 237, 1), rgba(23, 218, 68, 1));
  background-clip: text;
  color: transparent;
}

.info-color {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(98, 200, 255, 1));
  background-clip: text;
  color: transparent;
}

.info-alert {
  background: linear-gradient(180deg, rgba(252, 255, 125, 1), rgba(224, 188, 0, 1));
  background-clip: text;
  color: transparent;
  font-weight: bold;
}

/* 电气量第 2 部分：相位/电压/电流数值区 */
.electrical-part2 {
  width: 385px;
  height: 220px;
  background: url("/images/bg-middle.png") no-repeat center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.param-row {
  display: flex;
  align-items: center;
  width: 100%;
  /* gap: 8px; */
  padding: 15px 0px 40px 12px;
}

.param-name {
  width: 40px;
  font-size: 18px;
  font-weight: bold;
  color: rgba(203, 222, 237, 1);
}

.phase-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 59px;
  color: rgba(203, 222, 237, 1);
}

.phase-item span:nth-child(2) {
  color: rgba(203, 222, 237, 1);
}

.phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.dot-a {
  background-color: #ffd700;
}

.dot-b {
  background-color: #32cd32;
}

.dot-c {
  background-color: #ff4500;
}

.param-value {
  font-size: 16px;
  padding-left: 40px;
  color: rgba(203, 222, 237, 1);
}

/* 电气量第 3、4 部分：电流 + 电压图表区 */
.electrical-part3,
.electrical-part4 {
  width: 32.5%;
  height: 220px;
  position: relative;
}
.bg-chart1 {
  width: 184px;
  height: 36px;
  background: url("/images/bg-chart1.png") no-repeat center;
}
.bg-chart2 {
  width: 184px;
  height: 36px;
  background: url("/images/bg-chart2.png") no-repeat center;
}

.chart-title {
  position: absolute;
  top: 5px;
  /* left: 10px; */
  font-size: 14px;
  color: rgba(203, 222, 237, 1);
}
.chart-title2 {
  padding-top: 36px;
}

/* 状态量容器 - 占页面高度 1/3，内部 2 部分横向排列 */
.status-container {
  height: 268px;
  width: 100%;
  display: flex;
  padding: 10px;
  gap: 10px;
  margin-top: 10px;
}

/* 状态量第 1 部分：在线监测图表 */
.status-part1 {
  width: 50%;
  height: 220px;
  position: relative;
}

/* 状态量第 2 部分：带电监测图表 */
.status-part2 {
  width: 50%;
  height: 220px;
  position: relative;
}

.alarm-status {
  position: absolute;
  /* top: 5px; */
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  display: flex;
  gap: 8px;
}

.alarm-name {
  color: rgba(203, 222, 237, 1);
  font-size: 14px;
  padding-top: 5px;
}

.bg-chart3 {
  width: 100px;
  height: 52px;
  background: url("/images/bg-chart3.png") no-repeat center;
}