/* ===========================================================
   ENCODERS STYLES
=========================================================== */
.enc-root .enc-body { gap: 4px; }
.enc-input-pane { flex: 0 0 32%; min-width: 220px; }
.enc-results-pane { flex: 1; min-width: 0; }
.enc-stats {
  font-family: "Courier New", monospace; font-size: 10px;
  color: #cce4ff; font-weight: normal;
}
.enc-results { flex: 1; overflow: auto; background: #ffffff; min-height: 0; padding: 0; }
.enc-group-header {
  background: #000080; color: #fff;
  padding: 2px 8px; font-size: 11px; font-weight: bold;
  font-family: Verdana, sans-serif;
  position: sticky; top: 0; z-index: 2;
}
.enc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
}
.enc-row:hover { background: #ffffe1; }
.enc-row:nth-child(even) { background: #f8f8f8; }
.enc-row:nth-child(even):hover { background: #fffae0; }
.enc-row-label {
  flex: 0 0 240px; font-family: Verdana, sans-serif;
  font-size: 11px; color: #404040;
}
.enc-arrow {
  display: inline-block; width: 16px;
  font-family: "Courier New", monospace; font-weight: bold;
  text-align: center;
}
.enc-arrow.enc { color: #006000; }
.enc-arrow.dec { color: #800000; }
.enc-row-result { flex: 1; min-width: 0; overflow: hidden; }
.enc-row-result code {
  font-family: "Courier New", monospace; font-size: 12px;
  background: #ffffe1; border: 1px solid #d8d8a0;
  padding: 2px 6px; color: #000;
  display: inline-block; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-all;
}
.enc-empty {
  padding: 20px; text-align: center;
  color: #808080; font-style: italic; font-family: Verdana, sans-serif;
}