/* AI生成 */
/* ============================================================
   温室状态（默认首页）· 深色科技风
   前缀 gs-（greenhouse status）；三行块状 + 底部图表
   ============================================================ */
.gs-root {
  position: relative;
  padding: 14px 16px 22px;
  border-radius: 12px;
  color: #d8ecf5;
  background: radial-gradient(1200px 620px at 50% -10%, #0b3a52 0%, transparent 62%),
              radial-gradient(900px 560px at 100% 112%, #06212a 0%, transparent 60%),
              linear-gradient(160deg, #04111a 0%, #061a26 55%, #03101a 100%);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.gs-root::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background-image: linear-gradient(rgba(45,212,191,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(45,212,191,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.gs-root > * { position: relative; z-index: 1; }

/* 头部 */
.gs-head { display: flex; align-items: center; gap: 14px; padding: 4px 6px 14px; }
.gs-title { font-size: 22px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(180deg, #eafcff, #4dd6e8 70%, #22b8c9);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-title span { display: block; font-size: 11px; letter-spacing: 2px; color: #4f9db0; -webkit-text-fill-color: #4f9db0; font-weight: 600; margin-top: 2px; }
.gs-head-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.gs-live { font-size: 12px; color: #5b8ea3; padding: 2px 10px; border-radius: 10px; border: 1px solid rgba(95,142,163,.4); }
.gs-live.on { color: #7cff9b; border-color: rgba(124,255,155,.5); box-shadow: 0 0 12px rgba(124,255,155,.25); }
.gs-clock { font-family: Consolas, monospace; font-size: 14px; color: #6fe3f0; letter-spacing: 1px; }

/* 行与卡片 */
.gs-row { display: grid; gap: 14px; margin-bottom: 14px; }
.gs-row.r1, .gs-row.r2 { grid-template-columns: repeat(3, 1fr); }
.gs-row.r3 { grid-template-columns: 2fr 3fr; }
.gs-row.charts { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.gs-card {
  position: relative; border-radius: 10px; padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(16,58,80,.42), rgba(7,28,42,.66));
  border: 1px solid rgba(45,212,191,.18);
  box-shadow: inset 0 0 22px rgba(34,184,201,.06), 0 6px 20px rgba(0,0,0,.28);
}
.gs-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 26px; border-radius: 2px;
  background: linear-gradient(180deg, #2dd4bf, transparent);
}
.gs-ct { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #9fe6f2; letter-spacing: 1px; margin-bottom: 10px; }
.gs-ct i { width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #2dd4bf, #0ea5e9); box-shadow: 0 0 10px rgba(45,212,191,.6); }
.gs-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: #7cff9b; border: 1px solid rgba(124,255,155,.4); border-radius: 10px; padding: 1px 8px; }

/* 通用 */
.gs-empty { color: #6b93a5; font-size: 12px; padding: 10px 2px; }
.gs-big { display: flex; flex-direction: column; gap: 2px; }
.gs-big b { font-size: 30px; font-weight: 800; color: #eafcff; line-height: 1.05; text-shadow: 0 0 18px rgba(40,224,255,.28); }
.gs-big b small { font-size: 14px; font-weight: 700; margin-left: 2px; color: #7fe6f2; }
.gs-big span { font-size: 12px; color: #6fb9cc; letter-spacing: 1px; }
.gs-big.left b { font-size: 26px; }
.gs-em { font-size: 11px; color: #6b93a5; font-style: normal; margin-top: 4px; }
.gs-split { display: flex; align-items: center; gap: 10px; }
.gs-split .left { flex: 1; }

/* 进度条 */
.gs-bar { height: 8px; border-radius: 6px; background: rgba(45,212,191,.12); overflow: hidden; }
.gs-bar.sm { height: 6px; }
.gs-bar i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #22b8c9, #28e0ff);
  box-shadow: 0 0 10px rgba(40,224,255,.45); transition: width .6s ease; }

/* 第一行：工序网格（工序多时自动缩放为紧凑网格） */
.gs-proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.gs-proc-grid.dense { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.gs-proc-grid.dense .gs-proc { padding: 7px 8px; }
.gs-proc-grid.dense .gs-proc-nm { font-size: 12px; }
.gs-proc-grid.dense .gs-proc-v b { font-size: 18px; }
.gs-proc-grid.dense .gs-proc-sub { margin-top: 4px; font-size: 10px; gap: 8px; }
.gs-proc { border-radius: 8px; padding: 9px 10px; background: rgba(9,32,46,.55); border: 1px solid rgba(45,212,191,.14); }
.gs-proc-nm { font-size: 13px; color: #bfe9f2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-proc-v { display: flex; align-items: baseline; gap: 8px; margin: 5px 0 6px; }
.gs-proc-v b { font-size: 22px; font-weight: 800; color: #7cff9b; text-shadow: 0 0 14px rgba(124,255,155,.3); }
.gs-proc-v b small { font-size: 12px; }
.gs-proc-v span { margin-left: auto; font-size: 11px; color: #6fb9cc; }
.gs-proc-sub { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: #6b93a5; }
.gs-proc-sub em { font-style: normal; }

/* 第一行右：异常实时 */
.gs-an-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gs-an { display: flex; align-items: center; padding: 7px 9px; border-radius: 7px; background: rgba(9,32,46,.5); border: 1px solid rgba(45,212,191,.12); }
.gs-an-nm { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #bfe9f2; }
.gs-an-nm i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.dot-plant { background: #7cff9b; } .dot-env { background: #f5a524; } .dot-device { background: #fb7185; } .dot-other { background: #a78bfa; }
.gs-an-v { margin-left: auto; }
.gs-an-v b { font-size: 17px; font-weight: 800; color: #eafcff; }
.gs-an-v em { font-style: normal; font-size: 11px; color: #6b93a5; }

/* 第二行：KV / 分布 */
.gs-kv2 { display: flex; gap: 10px; margin: 10px 0; }
.gs-kv2 > div { flex: 1; border-radius: 8px; padding: 8px 10px; background: rgba(9,32,46,.5); border: 1px solid rgba(45,212,191,.12); }
.gs-kv2 b { font-size: 22px; font-weight: 800; color: #7fe6f2; }
.gs-kv2 b small { font-size: 12px; }
.gs-kv2 span { display: block; font-size: 11px; color: #6b93a5; margin-top: 2px; }
.gs-dist { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.gs-dist-i { display: grid; grid-template-columns: 62px 1fr 46px; align-items: center; gap: 8px; font-size: 12px; }
.gs-dnm { color: #9fc7d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-dist-i b { text-align: right; color: #eafcff; font-weight: 700; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gs-chip2 { font-size: 11px; padding: 2px 9px; border-radius: 10px; color: #9fe6f2; background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.25); }
.gs-chip2.bad { color: #ffb4c0; background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.35); }

/* 第三行：详情 */
.gs-progline { display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; color: #9fc7d4; margin-bottom: 10px; }
.gs-progline b { text-align: right; color: #7cff9b; }
.gs-detail { display: flex; flex-direction: column; gap: 9px; max-height: 260px; overflow-y: auto; }
.gs-d-h { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 5px; }
.gs-d-nm { color: #eafcff; font-weight: 700; }
.gs-d-p { color: #7fe6f2; }
.gs-d-w { color: #9fc7d4; }
.gs-d-t { margin-left: auto; color: #6fb9cc; }
.gs-d-t b { color: #7cff9b; }
.gs-drow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; border-radius: 7px; background: rgba(9,32,46,.42); border: 1px solid rgba(45,212,191,.1); }
.gs-drow .gs-d-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-d-st { font-size: 11px; color: #f5a524; }
.gs-d-st.ok { color: #7cff9b; }

/* 图表 */
.gs-chart { width: 100%; height: 168px; }
.gs-chart.mini { width: 116px; height: 116px; flex: 0 0 116px; }

/* 第三行：质检汇总 / 质检详情 表格 */
.gs-qc-sum { display: flex; flex-direction: column; }
.gs-qc-head, .gs-qc-row, .gs-qc-row2 {
  display: grid; align-items: center; gap: 8px; font-size: 12px;
}
.gs-qc-head { color: #6fb9cc; font-size: 11px; letter-spacing: 1px; padding: 0 8px 8px; border-bottom: 1px solid rgba(45,212,191,.18); }
.gs-qc-head .c1, .gs-qc-row .c1 { width: 84px; }
.gs-qc-head .c2, .gs-qc-row .c2 { flex: 1; }
.gs-qc-head .c3, .gs-qc-row .c3 { width: 70px; text-align: right; }
.gs-qc-row .c2 { display: flex; align-items: center; gap: 8px; }
.gs-qc-row .c2 .gs-bar { flex: 1; }
.gs-qc-row .c2 b { font-size: 12px; color: #7cff9b; min-width: 46px; text-align: right; }
.gs-qc-row .c2 b.bad { color: #ffb4c0; }
.gs-qc-row .c3 { color: #eafcff; font-weight: 700; }
.gs-qc-row { padding: 7px 8px; border-radius: 7px; }
.gs-qc-row:hover, .gs-qc-row2:hover { background: rgba(45,212,191,.06); }
.gs-qc-row2 { grid-template-columns: 70px 76px 1fr 64px 108px; padding: 7px 8px; border-radius: 7px; }
.gs-qc-row2 .d1 { color: #eafcff; font-weight: 600; }
.gs-qc-row2 .d2 { color: #9fc7d4; }
.gs-qc-row2 .d3 { color: #7fe6f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-qc-row2 .d4 b { color: #7cff9b; font-weight: 700; }
.gs-qc-row2 .d4 b.bad { color: #ffb4c0; }
.gs-qc-row2 .d5 { color: #6fb9cc; font-family: Consolas, monospace; font-size: 11px; }
.gs-qc-body { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin-top: 8px; }

/* 滚动条 */
.gs-detail::-webkit-scrollbar, .gs-qc-body::-webkit-scrollbar { width: 6px; }
.gs-detail::-webkit-scrollbar-thumb, .gs-qc-body::-webkit-scrollbar-thumb { background: rgba(45,212,191,.28); border-radius: 6px; }

/* 小屏自适应 */
@media (max-width: 1400px) {
  .gs-row.r1 { grid-template-columns: 1fr 1fr; }
  .gs-row.charts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .gs-row.r1, .gs-row.r2, .gs-row.r3, .gs-row.charts { grid-template-columns: 1fr; }
}