.prod { display: grid; gap: 12px; min-width: 0; }
.prod-head, .prod-card-head, .prod-tools { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.prod-head { flex-wrap: wrap; }
.prod h1 { font-size: 22px; letter-spacing: 0.04em; }
.prod-kicker { color: var(--muted); font-size: 13px; margin-top: 2px; }
.prod-range, .prod-tools, .prod-legend, .prod-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prod-range { position: relative; z-index: 2; }
.prod-range button, .prod-custom button, .prod-export, .prod-chip, .prod-tabs button, #prod-all {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}
#prod-all { background: #07140f; color: #e8f6ee; }
.prod-range button.active, .prod-chip.on, .prod-tabs button.active {
  background: var(--green-deep);
  border-color: transparent;
  color: white;
  font-weight: 600;
}
.prod-icon { width: 34px; padding: 5px 8px; display: grid; place-items: center; }
.prod-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.prod-custom label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.prod-custom input {
  background: #07140f;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}
.prod-kpis, .prod-main, .prod-bottom, .prod-extra { display: grid; gap: 12px; }
.prod-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prod-main { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.85fr); }
.prod-bottom { grid-template-columns: 1.15fr 0.85fr 1fr; }
.prod-extra { grid-template-columns: minmax(260px, 420px); }
.prod-card { padding: 12px 14px; min-width: 0; }
.prod-card h2 { font-size: 14px; }
.prod-kpi { display: flex; gap: 10px; align-items: center; }
.prod-kpi .ico { width: 36px; height: 36px; }
.prod-kpi strong { display: block; font-size: 20px; letter-spacing: -0.03em; }
.prod-kpi strong em { font-style: normal; font-size: 0.62em; color: #b7e7c8; margin-left: 4px; }
.prod-delta { color: var(--green); font-size: 12px; }
.prod-delta.down { color: #ff8d8d; }
.prod-delta.flat { color: var(--muted); }
.prod-tabs { margin: 8px 0 2px; }
.prod-tabs button { padding: 6px 14px; font-size: 13px; }
.prod-plot { position: relative; height: 360px; }
.prod-tip {
  position: absolute; z-index: 2; pointer-events: none;
  background: #10261c; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 6px 8px; font-size: 12px;
}
.prod-badge, .prod-note { color: var(--faint); font-size: 12px; }
.prod-check { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.prod-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.prod-scroll { max-height: 420px; overflow: auto; }
.prod-table th { color: var(--faint); font-weight: 500; text-align: left; }
.prod-table th, .prod-table td { padding: 6px 4px; border-bottom: 1px solid rgba(78, 186, 122, 0.12); }
.prod-table td:nth-child(n+3), .prod-table th:nth-child(n+3) { text-align: right; }
.prod-farm { display: flex; align-items: center; gap: 8px; }
.prod-farm img { width: 22px; height: 22px; border-radius: 4px; image-rendering: pixelated; }
.prod-comp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prod-comp b { display: block; font-size: 16px; }
.prod-comp span, .prod-peak span { color: var(--muted); font-size: 11px; }
.prod-avg { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; margin-top: 10px; }
.prod-peaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prod-peak { display: flex; justify-content: space-between; gap: 8px; }
.prod-peak.best b { color: var(--green); }
.prod-bar { margin-top: 8px; height: 8px; border-radius: 99px; background: #163026; overflow: hidden; }
.prod-bar span { display: block; height: 100%; background: linear-gradient(90deg, #12824a, #3ddc84); }
.prod-state { color: var(--muted); font-size: 13px; min-height: 1.2em; }
.prod-card.is-loading .prod-state::before {
  content: "";
  display: block;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(61, 220, 132, 0.05), rgba(61, 220, 132, 0.16), rgba(61, 220, 132, 0.05));
  background-size: 200% 100%;
  animation: prod-shine 1.2s linear infinite;
}
.prod-card.is-error .prod-state { color: #ffb4b4; }
@keyframes prod-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 1100px) {
  .prod-kpis, .prod-main, .prod-bottom, .prod-extra, .prod-comp { grid-template-columns: 1fr; }
}