/* 移动端竖屏大屏样式（设计基准 750px，1rem = 屏宽/7.5） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: #04101f;
    color: #c1e0e6;
    font-size: 0.28rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
img { display: block; border: 0; }
ul, li { list-style: none; }

#app { min-height: 100vh; display: flex; flex-direction: column; background-size: cover; background-position: center top; background-repeat: no-repeat; }

/* 加载层 */
.loading { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #04101f; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity .4s; }
.loadbox { color: #3f8fc4; font-size: 0.32rem; letter-spacing: 2px; }
.loading.hide { opacity: 0; pointer-events: none; }

/* 头部 */
.hd { position: relative; padding-top: 0.2rem; text-align: center; flex-shrink: 0; }
.hd-bar { height: 0.72rem; margin: 0 0.3rem; background: url("../images/titBg.png") no-repeat center / 100% 100%; }
.hd-title {
    position: absolute; top: 0.2rem; left: 0; width: 100%; height: 0.72rem; line-height: 0.72rem;
    font-size: 0.34rem; font-weight: bold; letter-spacing: 0.03rem; z-index: 2;
    background: linear-gradient(0deg, #ffffff 0%, #d3eaff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    padding: 0 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-sub { display: flex; align-items: center; justify-content: center; gap: 0.2rem; height: 0.5rem; margin-top: 0.08rem; }
.hd-clock { color: #9fc6dd; font-size: 0.24rem; letter-spacing: 0.02rem; }
.hd-weather { width: 1.7rem; height: 0.5rem; border: 0; }

/* 主体 */
.bd { flex: 1; padding: 0.2rem 0.3rem 0.4rem; display: flex; flex-direction: column; gap: 0.24rem; }
.card {
    background: rgba(8, 34, 66, 0.45);
    border: 1px solid rgba(52, 169, 197, 0.28);
    border-radius: 0.12rem;
    padding: 0.24rem 0.2rem 0.28rem;
    box-shadow: inset 0 0 0.4rem rgba(20, 90, 140, 0.15);
}
.sec-tit {
    height: 0.46rem; line-height: 0.46rem; margin-bottom: 0.2rem;
    background: url("../images/singleTit.png") no-repeat left center / auto 100%;
    padding-left: 0.5rem;
    font-size: 0.3rem; font-weight: bold; color: #cbebf3; letter-spacing: 0.02rem;
}

/* 中部指标 */
.card-kpi { padding: 0.2rem 0.1rem; }
.kpi-list { display: flex; }
.kpi-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.08rem; }
.kpi-item img { width: 0.56rem; height: 0.56rem; object-fit: contain; }
.kpi-name { font-size: 0.24rem; color: #9fc6dd; }
.kpi-value {
    font-size: 0.3rem; font-weight: bold; color: #ffd42a;
    background: url("../images/numBg.png") no-repeat center / 100% 100%;
    padding: 0.04rem 0.24rem;
}

/* 电站建设 */
.build-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; }
.build-item {
    display: flex; align-items: center; gap: 0.16rem;
    background: rgba(105, 216, 248, 0.08);
    border: 1px solid rgba(52, 169, 197, 0.18);
    border-radius: 0.08rem; padding: 0.16rem 0.2rem;
}
.build-item img { width: 0.5rem; height: 0.5rem; object-fit: contain; }
.build-info { display: flex; flex-direction: column; gap: 0.04rem; min-width: 0; }
.build-name { font-size: 0.24rem; color: #9fc6dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-value { font-size: 0.32rem; font-weight: bold; color: #ffd42a; }

/* 图表 */
.chart-box { width: 100%; height: 3.7rem; }
.chart-fault { height: 3.9rem; }

/* 发电量总计 */
.card-total { background: linear-gradient(180deg, rgba(10, 52, 96, 0.55), rgba(6, 28, 56, 0.55)); }
.total-inner { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; padding: 0.1rem 0; }
.total-label { font-size: 0.28rem; color: #9fc6dd; letter-spacing: 0.06rem; }
.total-num {
    font-size: 0.56rem; font-weight: bold; color: #ffd42a;
    text-shadow: 0 0 0.2rem rgba(255, 212, 42, 0.45); letter-spacing: 0.02rem; text-align: center;
}

/* 地图 */
.card-map { padding: 0.12rem; }
.map-img { width: 100%; height: auto; border-radius: 0.06rem; }

/* 场站状态 */
.station-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.18rem; }
.station-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    background: rgba(105, 216, 248, 0.06);
    border: 1px solid rgba(52, 169, 197, 0.18);
    border-radius: 0.08rem; padding: 0.16rem 0.06rem;
}
.station-name { font-size: 0.24rem; color: #9fc6dd; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-value { font-size: 0.26rem; font-weight: bold; padding: 0.02rem 0.2rem; border-radius: 0.3rem; color: #fff; background: rgba(25, 190, 107, 0.85); }
.station-value.bad { background: rgba(237, 64, 20, 0.85); }
.station-value.warn { background: rgba(255, 165, 0, 0.85); }

/* 报警列表 */
.alarm-wrap { border: 1px solid rgba(52, 169, 197, 0.18); border-radius: 0.08rem; overflow: hidden; }
.alarm-head, .alarm-row { display: flex; }
.alarm-head { background: rgba(20, 70, 120, 0.5); color: #fff; font-size: 0.26rem; }
.alarm-head span, .alarm-row span { flex: 1; text-align: center; padding: 0.14rem 0.04rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-body { position: relative; height: 2.6rem; overflow: hidden; }
.alarm-scroll { position: absolute; left: 0; top: 0; width: 100%; }
.alarm-row { border-top: 1px solid rgba(52, 169, 197, 0.12); font-size: 0.24rem; color: #c1e0e6; }
.alarm-row:nth-child(odd) { background: rgba(7, 33, 61, 0.35); }
@keyframes alarmRoll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.alarm-scroll.rolling { animation: alarmRoll var(--alarm-dur, 12s) linear infinite; }
.alarm-wrap:hover .alarm-scroll.rolling { animation-play-state: paused; }

.ft { height: 0.2rem; flex-shrink: 0; }

/* 小屏适配 */
@media (max-width: 360px) {
    .kpi-value { font-size: 0.26rem; }
    .total-num { font-size: 0.48rem; }
}