.tk-treff{
  --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:1200px; margin:0 auto; padding:14px 16px 40px;
}
html[data-theme="dark"] .tk-treff{
  --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-treff *{ box-sizing:border-box; }
.tk-treff h1{ font-size:20px; margin:0; font-weight:700; }
.tk-treff .tk-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tk-treff .tk-top .sp{ flex:1; }
.tk-treff .tk-desc{ color:var(--p-tx2); font-size:13px; margin:0 0 14px; }
.tk-treff .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-treff .btn:hover{ background:var(--p-s3); border-color:var(--p-bds); }
.tk-treff .btn.primary{ background:var(--p-br); border-color:var(--p-br); color:#fff; }
.tk-treff .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-treff .panel>h3{ margin:0 0 10px; font-size:15px; font-weight:700; padding-left:10px; border-left:3px solid var(--p-br); display:flex; align-items:center; gap:8px; }
.tk-treff .panel>h3 small{ font-weight:400; color:var(--p-tx3); font-size:12px; }
.tk-treff .grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px 12px; }
.tk-treff .grid.g2{ grid-template-columns:repeat(2,1fr); }
.tk-treff .grid.g3{ grid-template-columns:repeat(3,1fr); }
.tk-treff .grid.g4{ grid-template-columns:repeat(4,1fr); }
/* 筛选区：标签与控件同行、控件收窄、行距压缩（2026-09-12） */
.tk-treff .fld{ display:flex; flex-direction:row; align-items:center; gap:6px; min-width:0; }
.tk-treff .fld>label{ font-size:12px; color:var(--p-tx2); white-space:nowrap; flex:0 0 auto; }
.tk-treff .fld input,.tk-treff .fld select{ border:1px solid var(--p-bd); background:var(--p-s2); color:var(--p-tx); border-radius:8px; padding:6px 8px; font-size:13px; width:auto; flex:1 1 110px; min-width:0; max-width:150px; font-family:inherit; }
.tk-treff .fld input:focus,.tk-treff .fld select:focus{ outline:none; border-color:var(--p-br); }
.tk-treff .fld>div input{ max-width:92px; }
.tk-treff .kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px; }
.tk-treff .kpis.k4{ grid-template-columns:repeat(4,1fr); }
.tk-treff .kpi{ background:var(--p-s); border:1px solid var(--p-bd); border-radius:var(--p-r); padding:11px 12px; position:relative; overflow:hidden; }
.tk-treff .kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--p-br); }
.tk-treff .kpi.c2::before{ background:var(--p-br2); } .tk-treff .kpi.c3::before{ background:#f59e0b; } .tk-treff .kpi.c4::before{ background:#8b5cf6; }
.tk-treff .kpi .k-t{ font-size:12px; color:var(--p-tx2); }
.tk-treff .kpi .k-v{ font-size:18px; font-weight:700; margin-top:2px; word-break:break-all; }
.tk-treff .kpi .k-v small{ font-size:12px; font-weight:400; color:var(--p-tx3); margin-left:2px; }
.tk-treff table{ width:100%; border-collapse:collapse; font-size:13px; }
.tk-treff th,.tk-treff td{ border:1px solid var(--p-bd); padding:6px 8px; text-align:right; white-space:nowrap; }
.tk-treff th{ background:var(--p-s2); color:var(--p-tx2); font-weight:600; text-align:center; position:sticky; top:0; z-index:2; }
.tk-treff td:first-child,.tk-treff th:first-child{ text-align:left; }
.tk-treff tbody tr:nth-child(even){ background:var(--p-s2); }
.tk-treff tr.hl{ background:rgba(14,159,110,.12); font-weight:600; }
.tk-treff tr[data-grade="1"] td:last-child{ color:var(--p-br,#0e9f6e); font-weight:700; }
.tk-treff tr[data-grade="2"] td:last-child{ color:#f59e0b; font-weight:600; }
.tk-treff tr[data-grade="3"] td:last-child{ color:#dc2626; font-weight:600; }
.tk-treff .tg{ overflow-x:auto; max-height:520px; overflow-y:auto; }
.tk-treff .lg{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--p-tx2); margin-top:6px; }
.tk-treff .lg i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.tk-treff .note{ font-size:12px; color:var(--p-tx3); margin-top:8px; line-height:1.75; }
.tk-treff .note b{ color:var(--p-tx2); }
.tk-treff .tag{ display:inline-block; padding:1px 7px; border-radius:6px; font-size:12px; font-weight:600; }
.tk-treff .tag.ok{ background:rgba(14,159,110,.14); color:var(--p-br,#0e9f6e); }
.tk-treff .tag.no{ background:rgba(220,38,38,.14); color:#dc2626; }
.tk-treff .tag.mid{ background:rgba(245,158,11,.16); color:#d97706; }
.tk-treff .foot{ font-size:12px; color:var(--p-tx3); }
.tk-treff .foot b{ color:var(--p-tx2); }
/* grade badge */
.tk-treff .g1{ background:rgba(14,159,110,.1); color:var(--p-br); padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; }
.tk-treff .g2{ background:rgba(245,158,11,.1); color:#d97706; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; }
.tk-treff .g3{ background:rgba(220,38,38,.1); color:#dc2626; padding:1px 6px; border-radius:4px; font-size:11px; font-weight:700; }
/* ===== 能效等级分组表头 (table.gt) ===== */
.tk-treff table.gt thead tr:nth-child(1) th{ top:0; z-index:4; vertical-align:middle; }
.tk-treff table.gt thead tr:nth-child(2) th{ top:30px; z-index:3; font-size:11px; padding:4px 6px; }
.tk-treff table.gt thead th.sub{ font-weight:500; color:var(--p-tx3); }
.tk-treff table.gt thead th.gh1{ background:rgba(14,159,110,.16); color:var(--p-br,#0e9f6e); }
.tk-treff table.gt thead th.gh2{ background:rgba(245,158,11,.18); color:#d97706; }
.tk-treff table.gt thead th.gh3{ background:rgba(220,38,38,.14); color:#dc2626; }
.tk-treff table.gt td.eta{ font-weight:700; font-variant-numeric:tabular-nums; }
.tk-treff table.gt td.e1{ color:var(--p-br,#0e9f6e); }
.tk-treff table.gt td.e2{ color:#d97706; }
.tk-treff table.gt td.e3{ color:#dc2626; }
.tk-treff table.gt td.uk{ text-align:left; white-space:normal; min-width:130px; max-width:280px; font-size:12px; color:var(--p-tx2); }
.tk-treff table.gt td .core{ font-size:11px; color:var(--p-tx3); }
.tk-treff table.gt{ font-size:12.5px; }
.tk-treff table.gt th,.tk-treff table.gt td{ padding:5px 7px; }
.tk-treff .fld select#fChart{ font-size:12.5px; max-width:280px; }
.tk-treff canvas{ width:100%; display:block; }
/* stat bar */
.tk-treff .statbar{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:8px 0; font-size:12px; color:var(--p-tx2); }
.tk-treff .statbar b{ color:var(--p-tx); }
/* result count */
.tk-treff .rcount{ font-size:12px; color:var(--p-tx3); margin-left:auto; }
@media (max-width:900px){
  .tk-treff .grid{ grid-template-columns:repeat(2,1fr); }
  .tk-treff .grid.g2,.tk-treff .grid.g3,.tk-treff .grid.g4{ grid-template-columns:1fr; }
  .tk-treff .kpis,.tk-treff .kpis.k4{ grid-template-columns:repeat(2,1fr); }
  /* 单列时控件填满可用宽度，避免过窄留白 */
  .tk-treff .fld input,.tk-treff .fld select{ max-width:none; flex:1 1 auto; }
}
@media (max-width:640px){
  .tk-treff{ padding:12px 6px 30px; font-size:14px; }
  .tk-treff h1{ font-size:18px; line-height:1.35; }
  .tk-treff .tk-top{ gap:6px; }
  .tk-treff .btn{ padding:6px 10px; font-size:12px; }
  .tk-treff .grid,.tk-treff .grid.g2,.tk-treff .grid.g3,.tk-treff .grid.g4{ grid-template-columns:1fr !important; }
  .tk-treff .kpi,.tk-treff .kpis{ grid-template-columns:repeat(2,1fr) !important; gap:8px; }
  .tk-treff .panel{ padding:12px 12px; border-radius:10px; margin-bottom:12px; }
  .tk-treff input,.tk-treff select{ font-size:16px; padding:8px 9px; }
  .tk-treff .tg{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tk-treff table{ min-width:600px; }
}
@media (max-width:400px){
  .tk-treff .kpi,.tk-treff .kpis{ grid-template-columns:1fr !important; }
}