.tk-electrolyzer{
  --p-s:   var(--surface,   #ffffff);
  --p-s2:  var(--surface-2, #f4f7fb);
  --p-s3:  var(--surface-3, #eef3f9);
  --p-bd:  var(--border,    #e2e8f0);
  --p-bds: var(--border-strong, #cbd5e1);
  --p-tx:  var(--text,      #0f1f33);
  --p-tx2: var(--text-2,    #475569);
  --p-tx3: var(--text-3,    #94a3b8);
  --p-br:  var(--brand,     #0e9f6e);
  --p-br2: var(--brand-2,   #0ea5e9);
  --p-r:   var(--radius,    12px);
  color: var(--p-tx); font-size:14px; line-height:1.6;
  max-width:1180px; margin:0 auto; padding:14px 16px 40px;
}
html[data-theme="dark"] .tk-electrolyzer{
  --p-s:   var(--surface,   #121c2e);
  --p-s2:  var(--surface-2, #16223a);
  --p-s3:  var(--surface-3, #1a2842);
  --p-bd:  var(--border,    #24334e);
  --p-bds: var(--border-strong, #33456a);
  --p-tx:  var(--text,      #e6edf7);
  --p-tx2: var(--text-2,    #a8b8cf);
  --p-tx3: var(--text-3,    #6b7d99);
  --p-br:  var(--brand,     #34d399);
  --p-br2: var(--brand-2,   #38bdf8);
}
.tk-electrolyzer *{ box-sizing:border-box; }
.tk-electrolyzer h1{ font-size:20px; margin:0; font-weight:700; }
.tk-electrolyzer .tk-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tk-electrolyzer .tk-top .sp{ flex:1; }
.tk-electrolyzer .tk-desc{ color:var(--p-tx2); font-size:13px; margin:0 0 14px; }
.tk-electrolyzer .btn{ border:1px solid var(--p-bd); background:var(--p-s2); color:var(--p-tx); border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; }
.tk-electrolyzer .btn:hover{ background:var(--p-s3); border-color:var(--p-bds); }
.tk-electrolyzer .btn.primary{ background:var(--p-br); border-color:var(--p-br); color:#fff; }
.tk-electrolyzer .panel{ background:var(--p-s); border:1px solid var(--p-bd); border-radius:var(--p-r); padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow,0 8px 24px -10px rgba(15,23,42,.18)); }
.tk-electrolyzer .panel > h3{ margin:0 0 12px; font-size:15px; font-weight:700; padding-left:10px; border-left:3px solid var(--p-br); display:flex; align-items:center; gap:8px; }
.tk-electrolyzer .panel > h3 small{ font-weight:400; color:var(--p-tx3); font-size:12px; }
.tk-electrolyzer .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px 14px; }
.tk-electrolyzer .grid.g2{ grid-template-columns:repeat(2,1fr); }
.tk-electrolyzer .grid.g3{ grid-template-columns:repeat(3,1fr); }
.tk-electrolyzer .fld{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.tk-electrolyzer .fld > label{ font-size:12px; color:var(--p-tx2); }
.tk-electrolyzer .fld input,.tk-electrolyzer .fld select,.tk-electrolyzer .fld textarea{ border:1px solid var(--p-bd); background:var(--p-s2); color:var(--p-tx); border-radius:8px; padding:7px 9px; font-size:13px; width:100%; font-family:inherit; }
.tk-electrolyzer .fld textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.tk-electrolyzer .fld input:focus,.tk-electrolyzer .fld select:focus,.tk-electrolyzer .fld textarea:focus{ outline:none; border-color:var(--p-br); }
.tk-electrolyzer .kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px; }
.tk-electrolyzer .kpis.k4{ grid-template-columns:repeat(4,1fr); }
.tk-electrolyzer .kpi{ background:var(--p-s); border:1px solid var(--p-bd); border-radius:var(--p-r); padding:11px 12px; position:relative; overflow:hidden; }
.tk-electrolyzer .kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--p-br); }
.tk-electrolyzer .kpi.c2::before{ background:var(--p-br2); } .tk-electrolyzer .kpi.c3::before{ background:#f59e0b; } .tk-electrolyzer .kpi.c4::before{ background:#8b5cf6; }
.tk-electrolyzer .kpi .k-t{ font-size:12px; color:var(--p-tx2); }
.tk-electrolyzer .kpi .k-v{ font-size:18px; font-weight:700; margin-top:2px; word-break:break-all; }
.tk-electrolyzer .kpi .k-v small{ font-size:12px; font-weight:400; color:var(--p-tx3); margin-left:2px; }
.tk-electrolyzer .kpi.good .k-v{ color:var(--p-br,#0e9f6e); } .tk-electrolyzer .kpi.warn .k-v{ color:#d97706; } .tk-electrolyzer .kpi.bad .k-v{ color:#dc2626; }
.tk-electrolyzer table{ width:100%; border-collapse:collapse; font-size:13px; }
.tk-electrolyzer th,.tk-electrolyzer td{ border:1px solid var(--p-bd); padding:6px 8px; text-align:right; }
.tk-electrolyzer th{ background:var(--p-s2); color:var(--p-tx2); font-weight:600; text-align:center; }
.tk-electrolyzer td:first-child,.tk-electrolyzer th:first-child{ text-align:left; }
.tk-electrolyzer tbody tr:nth-child(even){ background:var(--p-s2); }
.tk-electrolyzer tr.hl{ background:rgba(14,159,110,.12); font-weight:600; }
.tk-electrolyzer tr.bad td:last-child{ color:#dc2626; font-weight:600; }
.tk-electrolyzer .tg{ overflow-x:auto; }
.tk-electrolyzer .cwrap{ width:100%; overflow:hidden; }
.tk-electrolyzer canvas{ width:100%; display:block; }
.tk-electrolyzer .lg{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--p-tx2); margin-top:6px; }
.tk-electrolyzer .lg i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.tk-electrolyzer .note{ font-size:12px; color:var(--p-tx3); margin-top:8px; line-height:1.75; }
.tk-electrolyzer .note b{ color:var(--p-tx2); }
.tk-electrolyzer .tag{ display:inline-block; padding:1px 7px; border-radius:6px; font-size:12px; font-weight:600; }
.tk-electrolyzer .tag.ok{ background:rgba(14,159,110,.14); color:var(--p-br,#0e9f6e); }
.tk-electrolyzer .tag.no{ background:rgba(220,38,38,.14); color:#dc2626; }
.tk-electrolyzer .tag.mid{ background:rgba(245,158,11,.16); color:#d97706; }
.tk-electrolyzer .foot{ font-size:12px; color:var(--p-tx3); }
.tk-electrolyzer .foot b{ color:var(--p-tx2); }
.tk-electrolyzer .mtx td input{ min-width:64px; }
.tk-electrolyzer .rowline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
@media (max-width:900px){
  .tk-electrolyzer .grid{ grid-template-columns:repeat(2,1fr); }
  .tk-electrolyzer .grid.g2,.tk-electrolyzer .grid.g3{ grid-template-columns:1fr; }
  .tk-electrolyzer .kpis,.tk-electrolyzer .kpis.k4{ grid-template-columns:repeat(2,1fr); }
}

/* ===== 站点窄屏适配增强（自动生成） ===== */
@media (max-width:980px){
  .tk-electrolyzer .grid{ grid-template-columns:repeat(2,1fr) !important; }
  .tk-electrolyzer .grid.g2{ grid-template-columns:1fr !important; }
  .tk-electrolyzer .grid.g3{ grid-template-columns:1fr !important; }
}
@media (max-width:640px){
  .tk-electrolyzer{ padding:12px 6px 30px; font-size:14px; }
  .tk-electrolyzer h1{ font-size:18px; line-height:1.35; }
  .tk-electrolyzer .tk-top{ gap:6px; }
  .tk-electrolyzer .tk-top .btn{ padding:6px 10px; font-size:12px; }
  .tk-electrolyzer .grid,.tk-electrolyzer .grid.g2,.tk-electrolyzer .grid.g3{ grid-template-columns:1fr !important; }
  .tk-electrolyzer .kpi,.tk-electrolyzer .kpis{ grid-template-columns:repeat(2,1fr) !important; gap:8px; }
  .tk-electrolyzer .panel{ padding:12px 12px; border-radius:10px; margin-bottom:12px; }
  .tk-electrolyzer input,.tk-electrolyzer select,.tk-electrolyzer textarea{ font-size:16px; padding:8px 9px; }
  .tk-electrolyzer .tg{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tk-electrolyzer table{ min-width:520px; }
}
@media (max-width:400px){
  .tk-electrolyzer .kpi,.tk-electrolyzer .kpis{ grid-template-columns:1fr !important; }
}